第5章-字体

最后更新时间：2024年04月21日

1.字体族

介绍

font-family（字体族/字体系列）指具有同种类似特性的一系列字体的组合或者说是同种变形的组合，并不单单指的是一个字体，包含了一个或多个的font-face（字型）。
为了覆盖所有情况，CSS定义了5种通用字体族：

  1. Serif字体（衬线字体）字形宽度各异，且有上下短线。包括Times、Georgia、New Centure Schoolbook。
  2. Sans-serif字体（无衬线字体）字形宽度各异，但没有上下短线。包括Helvetica、Geneva、Verdana、Arial、Univers。
  3. Monospace字体（等宽字体）字形宽度相等，每个字符在横向上所占的空间是一样的，可能有也可能没有上下短线。这种字体通常用于显示编程代码或表格数据。包括Courier、Courier New、Andale Mono。
  4. Cursive字体（手写体、草书字体），这种字体在笔划末端有较大的花饰，且比衬线字体华丽。包括Zapf Chancery、Author、Comic Sans。
  5. Fantasy字体（奇幻字体、艺术体）难以用任何特征来定义，但可以确定无法将其划归为其它类。包括Western、Woodblock、Klingon。

使用通用字体族

如果希望使用一种Sans-serif字体，而且不关心是哪一种具体字体，那么可以使用声明body {font-family: sans-serif;}。这样用户代理就会从sans-serif字体族中选择一个字体（如Helvetica)，并将其应用到body元素。因为有继承，还会将其应用到body元素中包含的所有元素，除非优先级更高的选择符覆盖了这个属性。

指定字体系列

如这样的声明h1 {font-family: Georgia;}，如果用户代理上Georgia字体不可用的话， 那么用户代理将不能使用这个规则，而是使用用户代理的默认字体来进行显示。此时应该指定h1 {font-family: Georgia serif;}，这样的话如果用户代理上没有Georgia字体，那么用户代理将会选择serif字体进行使用。
此外font-family还可以指定多个字体，用户代理将会按照顺序取匹配，最先匹配到的字体将会被使用。

引号的使用

如果一个字体出现了空格或者一些特殊符号如#、$**等，那么这个字体需要加上引号（根据实际情况可选单引号或者双引号）才能够Working Normally。
另外注意使用通用字体系列名（如serif）是不可以加引号的，加引号的话，用户代理会将其视为与此同名的特定字体而不是一个通用字体系列。也就是说与font-family中可用的关键字同名的字体名称必须放在引号里，这样才能与关键字区分开。

2.@font-face

作用是可在设计中使用自定义的字体。

@fant-face {
font-family: "name";
src: url("name.otf"), url("fonts/font.otf") format("opentype"), local("Helvetica");
}

font-family和src是两个必填描述符。
@font-face中描述符font-family与font-family属性中出现的字体族名是一样的。
src描述符以逗号分隔的列表用于提供后备字体文件，format用于为不带有常规扩展名的字体文件指定格式，以防用户代理不识别，local指定本地已安装的字体（可用于为本地安装的字体自定义名称，比如添加别名或者简称）。注意src的url适用同源策略，如果指向其它服务器，通常无法下载，除非服务器设置允许跨域访问。

支持的字体格式

值格式
embedded-opentypeEOT（Embedded OpenType）
opentypeOTF（OopenTYpe）
svgSVG（Scalable Vector Graphic）
truetypeTTF（TrueType）
woffWOFF（Web Open Font Format）

其它字体描述符

描述符默认值说明
font-stylenormal区分常规、斜体和倾斜字型
font-weightnormal区分不同的自重（粗细）
font-stretchnormal区分不同的字符宽度
font-variantnormal区分众多字体变体（例如小号大写字母），在很多方面与CSS中的font-feature-setting很像
font-feature-settingsnormal直接访问OpenType的底层特性（例如启用连字，如将“>=”自动替换显示成“≥”）
unicode-rangeU+0-10FFFF定义或指定字体中可用的字符范围，或者指定只有某些字才应用字体

3.字体加粗（font-weight）

font-weight属性可以使用字体系列的不同的加粗级别。

值normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
初始值normal

加粗如何起作用

有9级加粗度，如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。CSS规范指出，每个数对应一个加粗度，它至少与前一个数指定的加粗度相同。因此100、200、300可能都映射到同样的较细变形，800和900可能都映射同样的很粗的字体变形。只要一个关键字对应的变形不会比前一个关键字所对应的的变形更细就都是允许的。
一般地，这些数值都被定义为与某个常用变形名等价：400等价于normal；700对应于bold。在字体的变形中，以”Normal“、”Reguular“、”Roman“或”Book“等表示的可以分配给数字400，以”Medium“表示的可以分配给数字500。然而如果只有一个变体且以”Medium“表示，那么应该分配给400，而非500。

  1. 如果未指定500的加粗度，则其加粗度与400相同；
  2. 如果未指定300的加粗度，则为之选一种比400更细的字体，如果没有则等同于400。这种情况同样适用于200,100；

  3. 如果未指定600的加粗度，则为之选一种比500更粗的字体，如果没有则等同于500。这种情况同样适用于700,800,900。

    一种特定字体系列的假想加粗指定（仅供参考）

    字体指定的关键字指定的数字
    Zurich Light 100， 200， 300
    Zurich Regularnormal400
    Zurich Medium 500
    Zurich Boldbold600，700
    ZUrich Black 800
    Zurich UltraBlack 900

继承

font-weight是可以继承的

让字体更粗

如果把一个元素的加粗设置为bolder，则用户代理首先要计算其继承的父元素的加粗度，然后选一个数，它对应于比继承值更粗的加粗字体，而且在满足这条件的所有数中，选一个最小的。如果没有可选的字体，则选下一个更大的数值作为加粗度，如果已经是900的话，将会保持900不变。 例如（对于某种字体）：

<style>
     /* 假设字体系列只有两种特定字体，regular和bold */
    p {font-weight: 100;} /* 表现是regular */
    p span {font-weight: 400;} /* 表现是regular */
    strong {font-weight: bolder;} /* bold 700 */
    strong b {font-weight: bolder;} /* bold 800 逐步增加直至900，但其实800与900和700视觉效果相同*/
</style>

<body>
    <p>pppp_text_
        <span>
            span_text_
            <strong>strong_text_<b>bbbb_text</b></strong>
        </span>
    </p>
</body>


执行结果如上图所示。

让字体更细

是类似的。只不过是反过来了，让字体更粗是加粗度上移，而让字体更细是加粗度下移。

font-weight描述符

在使用@font-face自定义字体时，font-weight描述符可以为字型指定font-weight属性支持的字重等级。font-weight描述符的值可以是font-weight属性可取的任何一个之，inherit除外。

4.字体大小（font-size）

font-size取值

可能的值描述
xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸，从xx-small到xx-large。默认值：medium。
smaller把 font-size 设置为比父元素更小的尺寸。
larger把 font-size 设置为比父元素更大的尺寸。
length把 font-size 设置为一个固定的值。
%把 font-size 设置为基于父元素的一个百分比值。
inherit规定应该从父元素继承字体尺寸。

注意： font-size属性与看到的实际字体大小之间的具体关系右字体的设计者来确定。这种关系设置为字体本身中的一个em方框（也称为em框）。em方框只是如果没有额外行间距（line-height）设置字体时基线间的距离。某种字体的字符可能比默认的基线间距离要高，这种情况是存在的。所以，font-size作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。

绝对大小

绝对大小关键字包括：

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

大多数浏览器将medium作为默认值。
这些值之间有着复杂的换算关系，总体来说以medium为基准，其它值在其基础上更大或更小。
medium在大多数浏览器上相当于16px，但并不总是这样，需根据具体的操作系统、浏览器、用户设置而确定。

相对大小

  • larger 相对于父元素的大小在绝对大小梯度上上移
  • smaller 相对于父元素的大小在绝对大小梯度上下移

增大或减少的比例与计算绝对大小时使用系数一致。

百分数和em

有时，1em等价于百分数值，即在确定字体大小时1em等于100%
对于font-size相对于父元素的font-size来计算
对于line-height相对于元素自身的font-size来计算

注意：计算中可能会得出具有小数的数值，浏览器一般在计算保存结果过程中是不会舍去小数的，但是在渲染的时候有些浏览器可能会对小数值进行四舍五入或舍去。

字号的继承

font-size继承的是计算值而不是百分数

关键字和等宽文本

当父元素的font-size是关键字时，如medium，而子元素设置了字体是等宽字体且设置font-size: 1em。此时父元素一般实际渲染的大小是16px，因为浏览器默认大小通常是16px，但是由于父元素的字号是关键字medium，关键字的实际大小可能会根据用户的字体设置或浏览器的默认设置而有所不同，所以父元素直接将关键词传递给了子元素，子元素因为设置的是等宽字体，等宽字体的默认大小可能和普通字体不一致，所以会导致子元素大小和父元素不同。
避免方法：

span {
  font-family: monospace, serif; // 等宽字体后面添加一个普通字体;
  font-size: 1em; // 这样继承过来的medium，浏览器去判断其大小时会按照默认字体大小而不是等宽字体的默认大小
}

font-size-adjust

不同的字体有不同的高宽比值，这会导致同样的字号下，不同字体的清晰程度不一样，为了避免这个问题，通过合理设置font-size-adjust，浏览器可以自动调整字号。
注意：这个属性只有firefox和safari支持，慎用。

5.风格和变形

有风格的字体 font-style

  • italic是一种单独的字体风格，斜体
  • oblique是倾斜，是指将正常normal的字体利用算法倾斜，一般来说italic的斜体会更好看，因为是被设计过的
  • 如果没有italic字体，但是存在oblique字体，那么会在需要前者的地方使用后者。但是如果存在italic字体，不存在oblique字体，用户代理可能只是计算竖直字体的一个倾斜版本来生成oblique字体（当然这并不绝对）。
  • 通常，italic和oblique字体在web浏览器中查看上去可能一样
  • 以“Italic”、“Cursive”、“Kursiv“等标识的字型通常对应于italic关键字，而oblique往往分配以”Oblique“、”Slaned”、“Incline”等标识的字型

6.字体拉伸 font-stretch

当字体包含不同宽度字体时，设置font-stretch才会起作用。
注意：此属性兼容性很差！

7.字距调整 font-kerning

有些字体定义了字符之间相对位置的数据，font-kerning用来设置是否采用字体提供的字距信息。注意font-kerning和字符间距letter-sapcing是不同的。
注意：如果既要调整字距又要调整字符间距，应采用先调整字距再调整字符间距的顺序。

8.字体变形 font-variant

变形信息内嵌在字型中，包括各种连写、小号大写字母、小数的表示方式、数字之间的间距、零有无下划线等。
font-variant取值很多，常见的有normal和small-caps。取值为small-caps指小型大写字母文本，注意此效果既非一般的大写字母，也不是小写字母。

9.font 属性

所有关于字体的属性（如font-style、font-variant、font-weight）都可以放到font属性中写，作为一种简写方式。对于前三个值font-style、font-variant、font-weight，他们的顺序可以是任意的，如果某个属性的值为normal，则可以忽略不写（甚至是三个都可以不写）。后两个值，font-size和font-family必须以此顺序出现，而且其值必须有，如果少了其中某个属性，那么整个规则都将是无效的。

行高 line-height

font属性值，可以设置航高需要和font-size属性一起设置，如h2{font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif};

font属性的简写注意事项

font属性所有简写的值都会被重置为其默认值，因此会覆盖其它地方声明已经声明过的font的 值（当然只能覆盖权重比较低的规则）。

声明：Hello World|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 第5章-字体

Carpe Diem and Do what I like