笔记 | PHP 2012 | 字体控制 | 正斜/粗细/大小/行高/字体/颜色

• 字体样式 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;

---

字体精讲

1. 设计人员机器上有的字体，来浏览的客户机器上未必有词字体；
   css里如果声明了文字为某个字体，如雅黑，那么雅黑字体是从客户自己的机器上寻找字体并渲染在网页上。
   如果客户机器上没有该字体，会找一种相近的或机器默认的字体来代替。
   结论：设计者自己机器上看到的某种网页的字体效果，在浏览者看来未必有相同效果。

2. 英文的字体多，中文的字体少

3. 字体大类

分类	名称	作用	常用字体
有衬线字体	serif	一般用于正文	Times, Georgia, 宋体，仿宋
无衬线字体	sans-serif	一般用于标题	Arial, Geneva, 微软雅黑，黑体
等宽字体	Monospace	编程、开发时	Coruier, Courier New, Andale Mono

4. 字体作用的顺序
   font-family 可以设置多种字体，顺序从前往后显示
   如：font-family: a, b, c, d;
   即，如果有 a 字体，显示为 a 字体；若无，显示 b 字体；以此类推；
5. 当声明多个字体，如果某个字体名称包含多个单词，或中文字体，则字体名用双引号包起来
   如：font-family: "Times New Romas", "仿宋";

• 根据以上，可以得出：
  要点:
先英文字体, 再中文字体;
先特殊字体, 再安全字体;
先具体字体, 再字体大类.

---

2012_d1_①_025 028