网页设计中的字体选择与Web字体优化

Web
, , ,

💡 在网页设计的世界中，字体是一种强大的表达工具，能够赋予文字以独特的风格、情感和身份。随着互联网的不断发展，网页字体的选择和优化变得至关重要，直接影响用户体验和网站整体的视觉吸引力。

这就引出了一个重要问题：在网页上使用什么样的字体？如何确保字体在不同设备和浏览器中都能呈现出最佳效果？本文将带你深入探讨网页字体的世界，从字体的基础知识到Web字体的应用，揭示字体背后的艺术和科学。

无论你是一位网页设计师、开发者，还是对字体设计感兴趣的普通用户，通过这篇科普博客，你将对网页字体有一个更全面的了解，并学到如何选择、应用和优化字体以提升网站的视觉吸引力。

font-family字体族

字体族（font family）是一组字体的集合，它包括相似风格和设计的字体。在 CSS 中，可以使用 font-family 属性来指定字体族。当指定字体族时，浏览器会按照优先级选择用户设备上可用的字体。下面是常见的字体族及其在具体设计上的特点：

1. serif 字体族

  • 特点： serif 字体具有衬线，衬线是在字符的末端添加的额外笔画，如 “Times New Roman” 中的 “T” 的底部。
  • 示例： Times New Roman, Georgia, Palatino
  • 用途： 适合正式文档和印刷品，因为衬线有助于提高可读性。

2. sans-serif 字体族

  • 特点： sans-serif 字体没有衬线，字符的末端是直的。
  • 示例： Arial, Helvetica, Verdana
  • 用途： 适合屏幕显示，特别是小字体大小下更易阅读。

3. monospace 字体族

  • 特点： monospace 字体中的每个字符都具有相同的宽度，适合排列文本以保持字符对齐。
  • 示例： Courier New, Monaco, Consolas
  • 用途： 适合用于编程代码和等宽排列文本的场合。

4. cursive 字体族

  • 特点： cursive 字体模仿手写风格，通常包含连写的字符。
  • 示例： Comic Sans MS, Brush Script
  • 用途： 适合强调和创意性的场合，但不适合正式文档。

5. fantasy 字体族

  • 特点： fantasy 字体是一类装饰性的字体，通常不符合常规的字体分类。
  • 示例： Impact, Western
  • 用途： 适合用于标题和特殊效果，不适合大篇幅的正文。

示例

1
2
3
body {
  font-family: Arial, Helvetica, "Microsoft YaHei", sans-serif;
}

具体是根据哪款字体来渲染？

font-family属性可以定义一个或多个字体的名称，用于渲染文本。当使用font-family定义多款字体时，具体使用哪款字体渲染，取决于以下几个因素：

  • 字体的可用性：浏览器会按照font-family属性的顺序，从左到右，依次尝试使用每个字体。如果浏览器支持并且能够找到第一个字体，就会使用它。如果第一个字体不可用，就会尝试使用第二个字体，以此类推，直到找到一个可用的字体。如果所有的字体都不可用，就会使用浏览器的默认字体。
  • 字体的匹配度：如果一个字体不能完全覆盖文本中的所有字符，浏览器会尝试使用其他字体来补充缺失的字符。这种情况下，浏览器会根据字体的匹配度，即字体的样式，重量，斜度，等等，来选择最合适的字体。如果没有找到合适的字体，就会使用浏览器的默认字体。
  • 字体的优先级：如果一个字体是用户在操作系统或浏览器中设置的首选字体，或者是一个通用的字体族，如serif，sans-serif，monospace，等等，它会有更高的优先级，被更容易地使用。如果一个字体是一个特定的字体名称，如Arial，Times New Roman，等等，它会有更低的优先级，被更难地使用。

因此，当使用font-family定义多款字体时，具体使用哪款字体渲染，是一个动态的过程，需要考虑字体的可用性，匹配度，和优先级。为了保证文本的渲染效果，建议在font-family属性中，既指定特定的字体名称，又指定通用的字体族，以提供更多的备选方案。

font-weight 字重

font-weight 是 CSS 中用于设置字体粗细的属性。它的值可以是以下几种：

  • 数值： 100、200、300、400、500、600、700、800、900。数值越大，字体越粗。常见的使用是 normal 对应 400，bold 对应 700。
  • 关键字：
    • normal：定义标准的字符。
    • bold：定义粗体字符。
  • 全局关键字：
    • initial：设置属性为其默认值。
    • inherit：从父元素继承属性值。

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 使用关键字 */
.normal-text {
  font-weight: normal;
}

.bold-text {
  font-weight: bold;
}

/* 使用数值 */
.light-text {
  font-weight: 300;
}

/* 使用全局关键字 */
.default-weight {
  font-weight: initial;
}

/* 继承父元素的字体粗细 */
.inherited-weight {
  font-weight: inherit;
}

在上述示例中，.normal-text 使用 font-weight: normal; 设置为标准字体，.bold-text 使用 font-weight: bold; 设置为粗体，.light-text 使用 font-weight: 300; 设置为较轻的字体。.default-weight 使用 font-weight: initial; 将属性值重置为默认值，而 .inherited-weight 使用 font-weight: inherit; 从父元素继承字体粗细。

这些设置可以根据设计需要和品牌规范来选择，以确保网页文本的良好可读性和一致性。

常见粗细值名称和数值对应

100 到 900 之间的数值大致对应如下的常见粗细值名称：

100 200 300 400 500 600 700 800 900
Thin
(Hairline) Extra Light
(Ultra Light) Light Normal Medium Semi Bold
(Demi Bold) Bold Extra Bold
(Ultra Bold) Black
(Heavy)

关于Regular的定义

在 CSS 中，regular 字重并没有一个具体的数值标准，它通常是指字体家族中的默认或普通字重。具体的字体家族和其对应的字重可能有所不同，因为这是由字体设计者和字体提供商决定的。

一般而言，regular 字重对应于数值 400。在某些字体家族中，regular 也可能对应于 normal 关键字。

@font-face 自定义字体

@font-face 是 CSS 中的一个规则，用于定义自定义字体。通过 @font-face 规则，你可以引入并使用网页上没有安装的字体。这对于网页设计中的字体定制非常有用，可以确保你的网页在用户端正确显示所需的字体。

语法

1
2
3
4
5
6
@font-face {
  font-family: 'YourFontName'; /* 指定字体的名称，用于后续引用 */
  src: url('path/to/your/font.woff2') format('woff2'); /* 字体文件的路径和格式 */
  font-weight: normal; /* 字体的粗细，可选值包括 normal、bold 等 */
  font-style: normal; /* 字体的风格，可选值包括 normal、italic 等 */
}

详解

  • font-family： 指定字体的名称，以供后续在 CSS 中使用。这是你在 font-family 属性中引用字体时所使用的名称。
  • src： 指定字体文件的路径和格式。通常，你需要提供字体文件的绝对或相对路径，并指定字体的格式（如 woff2、woff、ttf 等）。可以提供多个 src 声明，以提供备用字体文件，以备不同浏览器和操作系统使用不同的格式。
  • font-weight 和 font-style： 这两个属性是可选的。它们允许你指定字体的粗细和风格。如果没有指定，将使用字体文件中的默认值。

使用示例

1
2
3
4
5
6
7
8
@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/your/font.woff2') format('woff2');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中：

  • @font-face 规则定义了一个名为 'MyCustomFont' 的自定义字体，它的来源是 'path/to/your/font.woff2' 文件。
  • 在 body 中，通过 font-family 属性将整个页面的默认字体设置为 'MyCustomFont'。这样，整个页面的文字都会使用这个自定义字体。

确保替换 'path/to/your/font.woff2' 为你实际字体文件的路径。此外，你可以提供多个字体格式，以提高在不同浏览器和操作系统上的兼容性。

format() 的作用

format() 是 @font-face 规则中的一个子属性，用于指定字体文件的格式。不同的浏览器和操作系统支持不同的字体文件格式，因此通过 format() 属性，你可以告诉浏览器如何解释字体文件。

常见的字体文件格式包括 WOFF（Web Open Font Format）、WOFF2（Web Open Font Format 2.0）、TTF（TrueType Font）、OTF（OpenType Font）等。通过提供适当的格式，你可以增加网页在各种设备和浏览器上正确显示字体的机会。

语法

1
2
3
4
@font-face {
  font-family: 'YourFontName';
  src: url('path/to/your/font.woff') format('woff');
}

在这个例子中，format('woff') 表示字体文件的格式是 WOFF。

常见的 format 值

  • format('woff')： WOFF 格式的字体文件。
  • format('woff2')： WOFF 2.0 格式的字体文件，是 WOFF 的升级版，通常更加高效。
  • format('truetype')： TrueType 字体文件格式。
  • format('opentype')： OpenType 字体文件格式。
  • format('embedded-opentype')： 嵌入式 OpenType 字体文件格式，通常用于旧版 Internet Explorer。

使用示例

1
2
3
4
5
@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/your/font.woff2') format('woff2'),
       url('path/to/your/font.woff') format('woff');
}

在这个例子中，@font-face 规则指定了两个字体文件，一个是 WOFF2 格式的，另一个是 WOFF 格式的。浏览器会根据支持的格式选择合适的字体文件来加载。

字体格式的建议

在网页开发中，字体有不同的格式，因为不同的浏览器和设备支持不同的字体格式。为了确保字体在各种环境中都能正确加载，通常会使用以下常见的字体格式：

  1. WOFF (Web Open Font Format)：

    • WOFF 是专门为 Web 设计的字体格式，提供了压缩和高效的字体传输。绝大多数现代浏览器都支持 WOFF 格式。

      1
      2
      3
      4
      5
      6
      7
      /* 引入 WOFF 格式的字体 */
      @font-face {
      font-family: 'YourFont';
      src: url('your-font.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      }

  2. WOFF2 (Web Open Font Format 2)：

    • WOFF2 是 WOFF 的升级版，具有更好的压缩效果，但它支持的浏览器较少。然而，对于支持的浏览器，WOFF2 是首选的字体格式。

      1
      2
      3
      4
      5
      6
      7
      /* 引入 WOFF2 格式的字体 */
      @font-face {
      font-family: 'YourFont';
      src: url('your-font.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      }

  3. TTF/OTF (TrueType/OpenType)：

    • TTF 和 OTF 是传统的字体格式，适用于许多设备和浏览器。但它们相对于 WOFF 来说文件大小较大，因此在 Web 中使用时可能不如 WOFF/WOFF2 效率高。

      1
      2
      3
      4
      5
      6
      7
      /* 引入 TTF 格式的字体 */
      @font-face {
      font-family: 'YourFont';
      src: url('your-font.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      }

在使用字体时，可以使用多个格式，以提供对不同浏览器的更好支持。例如：

1
2
3
4
5
6
7
8
@font-face {
  font-family: 'YourFont';
  src: url('your-font.woff2') format('woff2'),
       url('your-font.woff') format('woff'),
       url('your-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这样，浏览器将根据支持的格式选择合适的字体。确保字体文件在服务器上正确托管，并且在 CSS 中正确引用字体路径。