14 / 20

字体 | 自在学

字体

我们日常提到的“字体”，比如“Times”，往往习惯性地视为单一字体。但技术角度上看，一个所谓“字体”实际上包含一整套风格变体，因此更准确的说法是“字体家族”（font family）。每个字体家族常常包含正文字体、粗体、斜体、粗斜体等若干类型，每一种变体在传统字库中通常都是独立的字体文件。例如 “Times” 家族下至少包括 Times Regular、Times Bold、Times Italic 以及 Times Bold Italic，每一变体对应专有文件。

传统的字体家族为了覆盖所有字重、宽度及风格，会衍生出数十个不同文件。使用这种方式为排版带来了文件体积的大幅增加。而可变字体通过将多种风格和权重整合进一个文件，极大减小了总文件大小（增加的空间往往只需几KB），也让管理和加载更加便捷高效。

为了满足各种场景下字体回退的需要，CSS 规范定义了五大类“通用字体家族（generic font family）”：

通用字体家族	描述	代表字体示例	典型应用场景
Serif（衬线体）	字形末端带有装饰性衬线，字符宽度可变（比例字体）。	Times, Georgia, New Century Schoolbook	文章段落、长文本阅读
Sans-serif（无衬线体）	去除衬线装饰，风格简洁现代，同为比例字体。	Helvetica, Arial, Verdana, Geneva, Univers	标题、正文、界面元素
Monospace（等宽体）	每个字符宽度完全相同，与字形无关，利于对齐。	Courier, Consolas, Andale Mono	代码、表格、编辑器
Cursive（手写体）	模拟人工书写风格，字形带流畅曲线和装饰性笔画。	Comic Sans, Zapf Chancery, Author	个性化签名、标题装饰
Fantasy（奇幻体）	风格夸张、难以归类，装饰性强，通常不适用于正文。	Western, Woodblock, Klingon	标志文字、艺术性场合

每个操作系统和浏览器通常都为这五类字体配置了各自的默认字体供网页调用。除上述通用分类外，现代网页还可能用到如 Material Icons、SVG symbol 字体等特殊字体，这些字库往往并不承载字母，而是图标或特殊字符。

实验室

通用字体家族

在 CSS 中，我们通过 font-family 属性指定希望使用的字体家族。其语法允许按优先级列出多个字体名称，既可以直接指定具体的字体，也可以用通用字体家族做最终回退，确保各类系统均能正确渲染。font-family 默认值由用户代理（即浏览器）决定，并应用到页面所有元素。通过继承机制，未被明确覆盖的子元素都会沿用父元素的字体设定，我们也可以针对特定元素单独重设规则以满足排版需求。

比如，我们希望整个文档采用无衬线字体，但并不限制具体品牌，此时只需简单声明通用sans-serif家族：

|
body {font-family: sans-serif;}

这样的声明会让用户代理选择一个sans-serif字体家族，比如Helvetica，并将其应用到body元素。通过继承机制，所有从body元素继承样式的可见元素都会使用相同的字体选择，除非被更具体的规则覆盖。

为了创建更加复杂和精细的样式表，我们可以结合使用特定字体家族和通用字体家族。这样的组合为用户代理提供了回退机制，确保在首选字体不可用时能够找到合适的替代方案。比如，如果我们希望所有段落都使用Georgia字体，但也接受Times New Roman、Georgia、New Century Schoolbook和New York作为备选（这些都是serif字体），那么我们就需要按照偏好顺序将它们排列，并以通用家族结尾。

在实际的样式表设计中，我们经常会看到这样的组合使用。不同的元素类型会根据其在页面中的作用选择不同的字体家族。段落和标题可能使用不同的字体，以创造视觉层次和阅读流畅性。代码和预格式化文本通常使用等宽字体，以保持代码的可读性和对齐性。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: serif;
      }
      h1, h2, h3, h4 {
        font-family: sans-serif;
      }
      code, pre, kbd

自定义字体

在实际Web设计中，我们常常希望页面的排版更具个性或与视觉风格更契合，这时仅靠系统自带的通用字体族（如serif、sans-serif等）远远不够。此时，CSS中的@font-face规则就派上了用场。通过@font-face，开发者可以灵活地将网络上的字体文件引入到自己的网站中。无论这个字体用户的电脑是否已经安装，浏览器都能根据指定的规则自行下载和应用，从而极大地丰富页面的排版表现。

实现自定义字体引入的关键步骤有两个。首先，我们需要为这一字体定义一个专属的名字（font-family），这个名字会用于CSS的其它样式规则中进行调用；其次，需要通过URL提供字体文件的位置，这样浏览器才能正确地拉取资源。除了这两项必需设定之外，@font-face还包括多达14种可选的“描述符”，用于详细调整字体的加载条件和呈现方式，让开发者可以精细地控制字体在不同环境下的表现。需要注意的是，尽管大部分现代主流浏览器都对@font-face提供了良好支持，但也有极个别浏览器（如Opera Mini）为了优化性能会禁用此功能。

举个例子，如果想在页面样式中添加并使用某个独特的字体，我们需要首先通过@font-face明确定义好它的名字和对应的字体文件来源：

|
@font-face {
  font-family: "Example";
  src: url("Example-Regular.otf");
}

这样的定义允许用户代理下载指定的.otf文件，并在需要时使用它来渲染文字。当我们在font-family属性中引用这个名称时，浏览器就会知道应该使用这个自定义字体：

|
h1 {font-family: Example, Helvetica, sans-serif;}

在使用@font-face定义自定义字体时，有一个重要的机制值得强调：浏览器实际上不会一次性加载所有通过@font-face声明的字体资源，而是在页面渲染的过程中，只有当特定字体真正被需要展示时，相关的字体文件才会被请求。这种按需加载方式不仅提升了页面的加载效率，还避免了无谓的带宽浪费。同时，一旦字体文件被浏览器成功下载并缓存，用户日后在同一站点访问时便无需再次加载，进一步减少了网络开销，有助于提升整体性能体验。

不过，将自定义字体引入网站时，还需要考虑若干实际问题。首先，从安全和资源访问角度出发，绝大多数情况下字体文件需要托管在与CSS样式表同源的服务器上。如果尝试直接引用其他来源的字体（比如第三方网站），则需提前配置合适的跨域策略（CORS），或者选用专业的第三方字体托管平台进行分发。

此外，引入过多的字体文件会导致页面总体资源体积明显增加。尽管单个字体文件的体积通常在50KB至200KB之间，如果页面大量使用不同字重或字形的字体，累计下载量会迅速上升，给加载速度和流量带来负担。因此，实际项目中需要根据设计需求和用户体验合理控制字体种类和数量，避免对性能产生不良影响。

另外，字体的加载还可能引发一些用户体验问题，比如页面刚打开时文字暂时不可见（FOIT，Flash of Invisible Text）或闪现系统字体后又切换为自定义字体（FOUT，Flash of Unstyled Text）。

自定义字体可以极大增强网页的视觉表现力，但与此同时要警惕性能和交互体验方面的潜在风险。设计和开发过程中，请务必将用户感受和性能优化作为核心原则进行权衡。

字体描述符

@font-face的所有设置项都以“描述符”（descriptor）的形式出现，其语法结构与常规的CSS属性类似，即先写描述符名称，后跟冒号和属性值。每个@font-face规则至少要包含几个关键信息，其余描述符则可用于更精细控制字体表现。常见所有描述符的作用可通过相关表格查阅。

首先必须指定的是font-family和src两个基本描述符。

font-family用来为自定义字体起一个唯一的名称，这个名字将在全站点的CSS font-family属性中调用。我们可以根据实际需求自由命名，通常建议参考字体文件本身的名称，方便后续识别和维护。

src描述符则负责定义字体资源的具体位置。可以用逗号分隔列出多个资源地址，每个地址还可附加格式（format()）和技术（tech()）提示，用于引导浏览器如何解读该资源。通过src，我们既可以优先尝试加载用户电脑已安装的本地图形（local()），也可以指定在线字体文件的下载路径（url()）。按照标准安全策略，除特殊配置外，字体资源默认要求和样式表同源。为避免浏览器误下不支持的字体格式，建议为每个字体文件来源明确标示其格式信息：

|
@font-face {
  font-family: "Example";
  src: url("Example-Regular.otf") format("opentype");
}

格式提示的优势在于能够帮助浏览器跳过它不支持的格式，从而减少不必要的带宽消耗。如果没有提供格式提示，即使浏览器不支持该格式，字体资源仍然会被下载。我们可以提供多个来源作为回退机制，这样如果浏览器不支持第一种格式，或者由于某种原因无法下载，浏览器就可以尝试第二种来源：

|
@font-face {
  font-family: "Example";
  src: url("Example-Regular.otf") format("opentype"),
       url("Example-Regular.true") format("truetype");
}

如果我们想要支持彩色字体，还可以指定字体技术：

|
@font-face {
  font-family: "Example";
  src: url("Example-Regular-Color.otf")
       format("opentype") tech("color-COLRv1");
}

除了url()和format()、tech()的组合，我们还可以使用local()函数来引用用户计算机上已经安装的字体：

|
@font-face {
  font-family: "Example";
  src: local("Example-Regular"),
       url("Example-Regular.otf") format("opentype");
}

在这种情况下，浏览器会首先检查用户本地是否已经安装了名为Example-Regular的字体（大小写不敏感）。如果找到匹配的字体，就会使用本地安装的版本；如果没有找到，就会从网络下载指定的文件。

源的排列顺序非常重要，因为浏览器一旦遇到它支持的格式，就会尝试使用该源。一般来说，我们应该按照文件大小从小到大的顺序排列外部资源，并在前面放置local()值，这样可以优先使用本地字体以提升性能。

字符范围

在实际开发中，我们有时希望自定义字体只用于某些特定的字符区域，比如特定语言的文字，或是某类特殊符号。此时，可以通过unicode-range描述符，实现对字体应用范围的精准把控。 unicode-range的主要作用，是限定自定义字体仅应用于某些指定的Unicode字符或符号。这种做法除了可以优化加载效率、避免无谓的字体文件下载外，还能提升页面的个性化字体呈现能力。

其取值方式十分灵活，既可以指定某一个具体的Unicode代码点，也可以指定一个连续的代码点区间，甚至还可以利用通配符“?”一次性涵盖某一系列的代码点。例如：

|
@font-face {
  font-family: "ExampleFont";
  src: url("example-font.otf") format("opentype");
  unicode-range: U+590-5FF;
}

这个例子中，字体只会在Unicode字符代码点590到5FF之间的字符上使用。如果页面不包含这些字符，字体就不会被下载；如果页面包含这些字符，字体文件就会被完全下载。

字体显示

在网页开发中，字体文件的加载方式会直接影响到用户浏览页面时的体验。为此，CSS中专门提供了font-display属性，允许开发者精细控制字体资源在下载前后以及加载过程中的展示策略。

font-display的机制可以理解为分为三个主要阶段。首先是“阻塞期”：当下载的字体尚未准备好时，浏览器会保留文本位置但不会立刻渲染可见文字，而是用隐形的占位符维持布局。如果此时字体加载完毕，页面文字会立即切换为目标字体并显示出来。

接下来进入“交换期”：假如字体在阻塞期未能载入，浏览器会暂时以系统默认或后备字体来显示内容，这样用户可以正常阅读。当下载的字体资源可用后，这些内容会自动切换到新字体。

最后如果到了“失败期”，即字体在一段合理时间后仍未载入，浏览器会认为字体加载已失败，此后将始终使用备用字体，不会再更换为主字体。

font-display的各个可选值影响了上述三个阶段的行为，主要有以下几种：

auto：由浏览器自身决定加载策略和各阶段时长。
block：浏览器会设置较长的阻塞时间（例如3秒），等待字体加载完成；如未完成，则无限期进入交换阶段。
swap：阻塞期极短（大约100毫秒），很快就切换到交换阶段，主打快速内容可见性。
fallback：阻塞期与交换期相对较短（约3秒），之后若字体仍未加载好就直接进入失败期，恢复备用字体显示。
optional：没有阻塞期，几乎立即进入失败期，尽量减少字体加载对整体性能的影响。

我们在实际开发中要根据字体使用场景做选取。例如，核心标题字体希望保证视觉一致，可以优先采用block或swap，而装饰性或辅助性字体，为了减少加载等待更倾向于选择fallback或optional，以获得更快页面渲染速度和流畅的用户体验。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: "CustomTitle";
        src: url("title-font.woff2") format("woff2");
        font-display: swap;
      }
 
      @font-face {
        font-family

字体粗细

在网页设计时，文字的粗细变化是影响视觉效果与层级感的重要因素，同时也直接关系到内容的易读性。CSS 中，font-weight 属性专门用来精细控制文本的粗细程度，让设计者能够根据需求灵活调节页面的字重。

font-weight 支持的数值范围是 1 到 1000（包含两端），数值越小代表字体越细，数值越大则字体越粗。此外，font-weight 也接受一些常用的关键字，例如 normal（等价于 400）、bold（等价于 700），用以快速设置常见的字重。

需要注意的是，尽管 CSS 允许指定如此广泛的数值，但市面上大多数字体并不会拥有全部这些粗细样式。浏览器会根据当前字体可用的权重级别，将开发者设置的数值映射到最接近的实际字重。例如，若某种字体只囊括了 400（常规体）和 700（粗体）两种权重，则所有不大于 550 的 font-weight 设定，都会被渲染为 400，大于 550 的则展现为 700。因此，想要获得多样的字重效果，除了合理选择数值，还要保证所选字体具备丰富的字重变体。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .weight-100 { font-weight: 100; }
      .weight-300 { font-weight: 300; }
      .weight-500 { font-weight: 500; }
      .weight-700 { font-weight: 700; }
      .weight-900

在指定字体粗细时，除了可以直接写数值外，CSS还支持bolder和lighter这两种相对关键词。它们的作用是根据父元素已设置的font-weight基础上进行递进或递减。具体来说，bolder会让当前文本相较于其父元素更粗一级（通常增加100权重），而lighter则会让字体比父元素更细一级（通常减少100权重）。

这种机制在多层嵌套的文本结构中非常实用。例如在标题元素已经设定为粗体时，若想在标题内部再突出显示某些文字，就可以为子元素指定bolder，让其在原有基础上进一步加粗。

|
h1 {
  font-weight: bold; /* 相当于700 */
}
 
h1 strong {
  font-weight: bolder; /* 会尝试使用800或900 */
}

当某个字体家族并未内置所需的特定粗细时，浏览器会自动选择最接近该权重的样式进行显示。这一机制能够保证在字体资源不足的情况下，文字依然能以合适的形式呈现，保障界面的视觉一致性和可用性。

每种字体都定义了一个称为em方块（em square）的抽象正方形空间，字体中的所有字符都在这一方块范围内进行排列与缩放。实际设置font-size时，本质上是调整这个em方块的尺寸，而不是直接控制单个字体字符的高度。因此，不同字体即使数值上的font-size一致，呈现出的视觉大小也可能略有差异，这与各自em方块的比例设计密不可分。

在CSS中，font-size既可以用绝对单位指定（如px像素、pt点等，提供精确固定的尺寸控制），也可以采用相对单位（如em、rem、百分比%等，能够根据父级或根元素动态缩放），便于实现响应式设计和个性化布局需求。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      body { font-size: 16px; }
 
      .absolute-px { font-size: 14px; }
      .absolute-pt { font-size: 12pt; }
      .relative-em { font-size: 1.2

除了直接通过具体数值来设置字体大小之外，font-size 还支持一套基于关键字的预设值范围，包括从 xx-small 到 xxx-large 共八种标准尺寸。使用这些关键字可以快速实现字体大小的分级调整，每一级之间的尺寸通常是上一级的约 1.2 倍左右，从而方便做出逐步放大的视觉变化，而无需记忆具体的像素值。

在实际布局与响应式开发中，相对单位的选用具有不可替代的优势。像 em 和 rem 这样的单位允许字体依据父元素设置或根元素设置动态缩放，便于适配不同的用户阅读需求与终端显示场景。特别是 rem 单位，非常适合在设计体系中形成统一的比例关系。而 px（像素）等绝对单位，虽然能提供极细致的尺寸控制，但如果只用绝对单位，容易导致在无障碍和高可访问性设计时用户无法根据个人偏好灵活调整字体大小。

字体样式

font-style 属性用于实现字体的倾斜效果，从而赋予文本更多视觉上的变化和表现力。该属性不仅限定于普通与斜体的切换，还可细致地调整文本的视觉倾斜方式，为网页排版带来灵活的样式选择。

font-style 主要有三种常用取值：normal（常规直立）、italic（正宗斜体）以及 oblique（机械倾斜）。其中，normal 所呈现的是标准的竖直字体形态；italic 通常调用字体内部专为斜体设计的字形，笔画和细节上更具书写感和艺术性；而 oblique 则是将常规字体通过数学变换倾斜一定角度得来，视觉上与 italic 类似，但缺少专门的造型优化。这两种倾斜形式在具体表现和兼容性上略有差异，需要根据字体资源和设计需求进行选择。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .normal { font-style: normal; }
      .italic { font-style: italic; }
      .oblique { font-style: oblique; }
      .oblique-angle { font-style: oblique 15deg; }

oblique参数允许我们为倾斜字体设置一个具体的角度，从而在版式设计中实现更加细致的斜体控制。当没有明确给出角度时，主流浏览器通常默认使用14度来渲染倾斜。通过调整角度值（范围可以设置为-90度到90度），我们能够灵活地塑造文本从微小倾斜到明显变形的视觉效果，满足不同的设计需求。

在字体的实际运用方面，italic（斜体）往往用于突出文字，比如引用、强调等情境，由于它专门针对美观和易读性进行了优化。而oblique（倾斜体）更多地用作简便的倾斜处理，特别是在所选字体没有专门的斜体版本时，可以快速达到类似斜体的表现效果。

字体宽度

font-stretch属性则为字体宽度的调控提供了强大的手段。这个属性可以让开发者根据排版实际需要，从极窄直至超宽的范围内精准设置字符的横向拉伸程度，在需要密集排版或宽松留白时都能发挥作用。

font-stretch拥有九种预设宽度级别，从ultra-condensed（超紧缩，约50%宽度）至ultra-expanded（超扩展，约200%宽度），每个级别对应一个具体百分比值。这些标准化的命名和数值，有助于保持不同字体间的一致性和兼容性，也使得宽度调节更加直观便利。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .ultra-condensed { font-stretch: ultra-condensed; }
      .condensed { font-stretch: condensed; }
      .normal { font-stretch: normal; }
      .expanded { font-stretch: expanded; }
      .ultra-expanded

font-stretch属性除了可以使用如“condensed”或“expanded”等关键字之外，还能直接设置为50%到200%之间的百分比数值。这使开发者能够更灵活地精细调整字体的横向宽度，特别是在响应式布局和自适应设计场景下，通过调整百分比能够让字体自动适应不同设备或容器的实际需求，优化文本的空间利用率和视觉效果。

但需要注意的是，font-stretch的实际表现效果还受到所选字体的支持程度影响。如果字体自身并未内置多种宽度变体，即使通过CSS设置不同的font-stretch值，也未必能看到明显的变化。相比之下，支持可变宽度轴的可变字体（Variable Font）通常能带来更平滑、真实且连续的宽度调整体验。 font-stretch的常见应用场景包括：

强调标题：通过增大字体宽度提升标题的视觉冲击力
空间节约：在受限空间缩水字体，提升信息密度
保持品牌风格：确保文字在不同屏幕和布局下一致地展现品牌特性
艺术化表现：制造独特视觉风格或突出重要内容

综合使用font-stretch等字体相关的CSS属性，能够帮助我们在实际页面设计中，有条不紊地规范和丰富字体的视觉表现，让文字既美观又易读，增强用户体验。

字体合成

在前端开发过程中，经常会遭遇某些字体家族并未同时包含如粗体、斜体或小型大写等全部变体的情况。此时，为了实现设计要求的文字样式，浏览器通常会自动采用算法模拟出对应的字体变体，这一过程被称为字体智能合成。虽然合成解决了字体资源不足导致的展示问题，但也可能与原生变体在细节上存在视觉差异。

font-synthesis是一个专门用于调控这种自动合成功能的CSS属性。它允许开发者灵活决定是否允许浏览器对weight（粗细）、style（斜体）以及small-caps（小型大写）等变体进行合成。通过合理设置font-synthesis，可以提高视觉一致性，避免由于自动合成造成设计风格偏离预期，从而保障页面的呈现效果可控且一致。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 允许所有合成 */
      .allow-all { font-synthesis: weight style small-caps; }
 
      /* 只允许粗细合成 */
      .weight-only { font-synthesis: weight; }
 
      /* 禁止所有合成 */
      .no-synthesis { font-synthesis: none; }

font-synthesis的可选值包括：

weight：允许浏览器合成粗体和细体变体
style：允许浏览器合成斜体变体
small-caps：允许浏览器合成小型大写字母
none：完全禁止任何形式的字体合成

默认情况下，大多数浏览器会同时启用weight和style的合成，但small-caps合成通常是被禁用的。这是因为合成的粗体和斜体在大多数情况下都能提供可接受的视觉效果，而合成的缩小大写字母往往看起来非常不自然。

字体变体

当今的字体设计已经超越了简单的粗体与斜体切换，现代字体包含了各种丰富的变体特性，使得我们可以对排版细节进行更为精致的微调。font-variant属性便是实现这些高级排版效果的重要工具，它为网页文字渲染带来了更多专业和灵活的选择。

font-variant并非单一功能，它是一个包含多项变体特征的复合属性。通过它，我们可以同时配置多个字体变体分支，比如字母的大小写样式、数字的展示方式以及是否启用连字等。这些细节不仅让页面观感更加美观，也能有效增强文本的清晰度与专业度。

控制大写字母的显示

在具体应用上，font-variant-caps是一个专门用于管理字母大小写呈现方式的属性。通过该属性，我们可以细致地指定大写字母的排版风格，比如小型大写、全小型大写、微型大写等。对于需要强调标题设计或特殊排版风格的场景，font-variant-caps能为设计师带来非常灵活且专业的解决方案。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .normal { font-variant-caps: normal; }
      .small-caps { font-variant-caps: small-caps; }
      .all-small-caps { font-variant-caps: all-small-caps; }
      .petite-caps { font-variant-caps: petite-caps; }
      .all-petite-caps

数字变体

在专业排版中，数字的显示方式往往需要特殊的考虑。font-variant-numeric属性为我们提供了对数字显示的精确控制，特别是在处理表格数据、价格信息或者科学计数时。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .normal { font-variant-numeric: normal; }
      .oldstyle-nums { font-variant-numeric: oldstyle-nums; }
      .lining-nums { font-variant-numeric: lining-nums; }
      .tabular-nums { font-variant-numeric: tabular-nums; }
      .proportional-nums

字体属性简写

在CSS中，font属性能够将多项字体设置（如字体风格、粗细、大小、行高与字体族）通过一行语句实现统一配置，大大简化了样式书写，提高了开发的便捷性。但在使用该属性时要注意，简写会覆盖与其相关的所有字体属性，因此在实际应用过程中，需要仔细确认每个参数，避免意外修改到不希望变更的样式，确保页面字体效果符合预期。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 完整的字体声明 */
      .complete-font {
        font: italic small-caps 24px/1.5 "Georgia", serif;
      }
 
      /* 只声明必需的字体大小和家族 */
      .minimal-font {
        font: 18px Arial

font简写属性虽然方便，但需要谨慎使用。它的语法要求字体大小和字体家族是必需的，其他属性则是可选的。行高可以通过斜杠与字体大小结合声明。

小结

在数字排版实践中，字体属性不仅决定了整体视觉风格，更直接影响内容的可读性与用户体验。

随着web技术发展，字体控制能力持续进步，可变字体为设计带来更多可能。优秀的字体设计，如同建筑艺术，是在功能性、美观性和实用性之间达到平衡的过程。要精进这门艺术，可以深入学习OpenType规范、可变字体原理、页面性能优化与无障碍设计等领域，不断实践与探索。通过系统掌握和应用现代CSS字体规范，我们就能够自信地打造兼具专业水准与舒适体验的数字阅读环境。