WEB基础之：CSS字体

字体

• • 1. 字体系列
  • 2. font-family使用字体系列
  • 3. font-weight字体加粗
  • 4. 字体大小
  • • 结合使用百分比和 EM
  • 5. 字体风格和变形
  • • 5.1 font-style属性
    • 5.2 font-variant属性
  • 6. 拉伸和调整字体
  • • 6.1 font-stretch拉伸字体
    • 6.2. font-size-adjust 调整字体
  • 7. font属性
  • • 7.1 典型字体规则
    • 7.2 line-height增加行高

1. 字体系列

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

• Serif 字体: 这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
• Sans-serif 字体: 这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
• Monospace 字体: Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
• Cursive 字体: 这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
• Fantasy 字体: 这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

2. font-family使用字体系列

font-family 先确定多个字体的优先顺序，然后用逗号将它们连起来：

根据上面的列表。用户代理会按所列的顺序查找这些字体，若所列所有字体都不可用，就会简单地选择一个可用的serif字体。

即：font-family 属性的值是用于某个元素的字体族名称一个优先级列表。浏览器会调用按优先顺序查找后可识别的第一个字体名称。

• 建议在所有font-family规则中都提供一个通用字体系列，在用户代理无法提供与规则匹配的特定字体时，会选择一个候选字体。
• font-family中使用引号：使用场景是当一个字体名中有一个或多个空格，或者字体名包含#或$之类的符号；

3. font-weight字体加粗

加粗的相对值必须要限制在绝对大小范围内。

p {font-weight: normal;}
p {font-weight: bold;}
p {font-weight: 900;}
           

属性值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

4. 字体大小

属性值	描述
xx-small x-small small medium large x-large xx-large	font-size有7个绝对大小值，从 xx-small 到 xx-large。 默认值：medium。
smaller larger	不同于加粗的相对值，相对大小不必限制在绝对大小范围内。 因此一个字体的大小可以超过属性值描述xx-small和xx-large的大小。
length	把 font-size 设置为一个固定的值。
%	基于父元素继承的大小计算一个百分比值。 有时长度值em等价于百分数值，即确定字体大小时1em等于100%
inherit	规定应该从父元素继承字体尺寸。

• 使用 em 来设置字体大小

W3C 推荐使用 em 尺寸单位。避免在 Internet Explorer 中无法调整文本的问题。浏览器中默认的文本大小是 16 像素。1em 等于当前的字体尺寸，那么对于浏览器来说，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

可以使用下面这个公式将像素转换为 em：pixels/16=em

假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em

• 结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

body {font-size:100%;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
           

5. 字体风格和变形

5.1 font-style属性

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。

属性值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

5.2 font-variant属性

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

属性值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

6. 拉伸和调整字体

6.1 font-stretch拉伸字体

属性值	描述
normal	默认值。把缩放比例设置为标准。
wider	把伸展比例设置为更进一步的伸展值；测试时不支持
narrower	把收缩比例设置为更进一步的收缩值；测试时不支持
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	设置 font-family 的缩放比例。 “ultra-condensed” 是最宽的值 “ultra-expanded” 是最窄的值。
inherit	规定应该从父元素继承font-stretch 属性的值。

6.2. font-size-adjust 调整字体

属性值	描述
none	默认。如果此字体不可用，则不保持此字体的 x-height。
number	定义字体的方面值比率。x-height与字符大小的比 可使用的公式： 声明的font-size * （font-size-adjust 值 / 可用字体的方面值）= 调整后的font-size 举例： font-size设置为10px ，Verdana字体x-height与字符大小的比值是0.58，而对于Times则是0.46，在使用Times代替Verdana字体的情况下，那么替代字体的尺寸将是 10 * (0.58/0.46) = 12.6px。

7. font属性

属性值	描述
font-style	规定字体样式。
font-variant	规定字体异体。
font-weight	规定字体粗细。
font-size/line-height	规定字体尺寸和行高。
font-family	规定字体系列。
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。

7.1 典型字体规则

font的属性值要以font-size在前，font-family在后，作为声明中的最后两个值，而且，font声明中必须有这两个值。

7.2 line-height增加行高

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。可以作为对font-size值的一个补充，并用斜线(/)与之分隔。

body {font-size: 12px;}
p {font: bold italic 200%/1.2 Verdana, Helsinki, Arial, sans-serif;}