- 字体样式 font-style
font-style: normal; // 默认
font-style: italic; // italic 和 oblique 都是斜体
font-style: oblique;
- 字的粗细 font-weight
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: light;
font-weight: 100 | 200 | ... | 900; // 400 相当于 normal
- 字的大小 font-size
font-size: 16px;
- 行高 line-height
line-height: 15px;
字的中间跟行高的中间对齐
利用该特点, 使导航中的文字实现竖直方向上的居中
- 字体 font-family
font-family: SimHei; // 黑体 // 多个字体用逗号","隔开
要点:
先英文字体, 再中文字体;
先特殊字体, 再安全字体;
先具体字体, 再字体大类. ( 字体大类: 有衬线 | 无衬线 )
-
字的颜色 color
*注: 不是 font-color
color: #000;
※ font 属性可以简写在一行中
font: style weight size/line-height family;
*按此顺序写一个或多个属性, 但size和line-height必须都有, 且用"/"隔开
font: italic bold 20px/30px 黑体;
font: 15px/30px;
字体精讲
-
设计人员机器上有的字体，来浏览的客户机器上未必有词字体；
css里如果声明了文字为某个字体，如雅黑，那么雅黑字体是从客户自己的机器上寻找字体并渲染在网页上。
如果客户机器上没有该字体，会找一种相近的或机器默认的字体来代替。
结论：设计者自己机器上看到的某种网页的字体效果，在浏览者看来未必有相同效果。 -
英文的字体多，中文的字体少
-
字体大类
| 分类 | 名称 | 作用 | 常用字体 |
|---|---|---|---|
| 有衬线字体 | serif | 一般用于正文 | Times, Georgia, 宋体，仿宋 |
| 无衬线字体 | sans-serif | 一般用于标题 | Arial, Geneva, 微软雅黑，黑体 |
| 等宽字体 | Monospace | 编程、开发时 | Coruier, Courier New, Andale Mono |
- 字体作用的顺序
font-family 可以设置多种字体，顺序从前往后显示
如：font-family: a, b, c, d;
即，如果有 a 字体，显示为 a 字体；若无，显示 b 字体；以此类推； - 当声明多个字体，如果某个字体名称包含多个单词，或中文字体，则字体名用双引号包起来
如：font-family: "Times New Romas", "仿宋";
- 根据以上，可以得出：
要点:
先英文字体, 再中文字体;
先特殊字体, 再安全字体;
先具体字体, 再字体大类.
2012_d1_①_025 028
网友评论