CSS 字体
- 文字
颜色、字体大小、字体、加粗等
- 文本
行高、对齐方式、文本装饰
文字样式属性:
- 字体: font-family
- 文字大小: font-size
- 文字颜色:color
- 文字粗细: font-weight
- 文字样式: font-style
(1) font-family 字体属性
定义元素内文字以什么字体来显示
语法:
a. font-family:【字体1】【,字体2】【,...】
设置了多个字体,只会执行一个字体,若字体1找到,则使用字体1,否则寻找字体2,若有则使用,否则,...,最后都没寻找到,则会使用浏览器默认字体。
<style type="text/css">
h1{font-family:"宋体";}
p{font-family:"微软雅黑","宋体";}
</style>
b. font-family:具体字体名,字体集
字体集:
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
<style type="text/css">
h1{font-family:"宋体";}
p{font-family:"微软雅黑","宋体",sans-serif;}
</style>
不同字体集,有不同的装饰效果。例如:
(2)font-size
定义元素内文字大小
语法:
font-size:绝对单位|相对单位
绝对单位:
相对单位:
随着浏览器(默认值)的改变而变化。
- px (像素)
- em 与 % (都是针对父元素进行字体大小设置)
- 比父元素大或小
<style type="text/css">
h1{font-family:"宋体";}
p{font-family:"微软雅黑","宋体",sans-serif;}
.em{font-size:2em;}/*占两个字体大小*/
.em{font-size:150%}
</style>
</head>
(3) color
定义元素内颜色
(4) font-weight 与 font-style
a. 给文字加粗,可以使用html标签:<b></b>、<strong></strong>。
css:
b. 给文字设置斜体,可以用html标签<em></em>
css 语法:
font-style:normal或italic或oblique
normal 是默认值
italic 是斜体
oblique 是倾斜,与斜体展示起来相似
c. 给字体变形 font-variant
设置元素中文本为小型大写字母(针对英文)
css 语法:
font-variant:normal或small-caps