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 */
  • 结合使用百分比和 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拉伸字体

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-captioncaption 字体的小型版本。
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;}
posted @ 2022-06-02 10:21  f_carey  阅读(16)  评论(0编辑  收藏  举报  来源