WEB基础之:CSS字体
字体
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 先确定多个字体的优先顺序,然后用逗号将它们连起来:
p {font-family: "Times New Roman", "Microsoft New Tai Lue", Georgia, Serif, Arial;}
根据上面的列表。用户代理会按所列的顺序查找这些字体,若所列所有字体都不可用,就会简单地选择一个可用的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
h2 {font-size:2.5em;} /* 40px/16=2.5em */
在所有浏览器中均有效的方案是为 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拉伸字体
p {font-stretch: ultra-condensed;}
属性值 | 描述 |
---|---|
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 典型字体规则
p {font: italic 900 small-caps 30px Verdana, Helsinki, Arial, sans-serif;}
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;}