目录
一、介绍
字体在前端开发中扮演着重要的角色，它不仅影响到网页的可读性和美观，还关系到用户的整体体验。下面详细介绍字体在前端项目中的应用，包括字体的提供方式、兼容性考虑、常见的字体引入方式及使用实践。
字体的提供方式
-
字体类型：
- Web 字体：通过网络加载的字体。通常从字体服务提供商（如 Google Fonts、Adobe Fonts）加载。
- 本地字体：用户设备上已经安装的字体。这些字体在用户设备上可用，但无法确保所有用户都有相同的字体。
- 嵌入字体：直接嵌入在网页或应用中，通常是字体文件（如
.woff,.woff2,.ttf,.eot）。
-
字体文件格式：
- TrueType Font (TTF)：较早的字体格式，支持各种操作系统和设备。
- Web Open Font Format (WOFF/WOFF2)：专为网页优化的字体格式，支持更高的压缩率和更快的加载速度。
- Embedded OpenType (EOT)：主要用于旧版 Internet Explorer。
- Scalable Vector Graphics (SVG)：用于图像字体，如图标字体。HOW - 图形格式SVG及其应用（图标库&字体）
字体兼容性和支持
-
字体包：
- 确保字体兼容：不同的设备和浏览器可能对不同的字体格式支持不一致。通常推荐使用 WOFF2 作为首选格式，因为它在现代浏览器中得到广泛支持，并提供了较好的压缩率。
- 字体回退：定义一系列字体备选方案，以确保在首选字体不可用时，浏览器能够使用合适的替代字体。
-
兼容性考虑：
- 设备和操作系统：用户设备上安装的字体可能有所不同，因此需要考虑字体的回退策略。
- 字体格式：确保提供的字体格式兼容大多数浏览器和设备。例如，使用 WOFF2、WOFF、TTF 和 EOT 格式来覆盖不同的需求。
- CSS
font-family属性：定义字体的回退链，确保在首选字体无法加载时，有备选字体提供。
常见的字体引入方式
-
使用 Web 字体服务：
- Google Fonts：
在 CSS 中使用：<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">body { font-family: 'Roboto', sans-serif; } - Adobe Fonts (Typekit)：
在 Adobe Fonts 控制台中生成的<link>标签或 JavaScript 代码：
在 CSS 中使用：<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">body { font-family: 'MyAdobeFont', sans-serif; }
- Google Fonts：
-
直接引入本地字体：
- 在项目中添加字体文件：
将字体文件放在项目的public/fonts文件夹中。@font-face { font-family: 'MyLocalFont'; src: url('/fonts/MyLocalFont.woff2') format('woff2'), url('/fonts/MyLocalFont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'MyLocalFont', sans-serif; }
- 在项目中添加字体文件：
-
通过 CSS @import 引入：
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap'); body { font-family: 'Open Sans', sans-serif; }
使用实践
-
选择合适的字体：
- 可读性：选择易于阅读的字体，如 Google Fonts 中的 Roboto、Open Sans。
- 品牌一致性：使用与品牌形象一致的字体，例如公司定制的品牌字体。
- Web友好性：优先使用 Web 字体（如 WOFF2），确保良好的浏览器支持和加载性能。
-
优化字体加载：
- 使用 Font Display：控制字体的加载策略，例如
font-display: swap，以避免 FOUT（Flash of Unstyled Text）。@font-face { font-family: 'MyOptimizedFont'; src: url('/fonts/MyOptimizedFont.woff2') format('woff2'); font-display: swap; } - 预加载关键字体：使用
<link rel="preload">标签预加载重要的字体。<link rel="preload" href="/fonts/MyOptimizedFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
- 使用 Font Display：控制字体的加载策略，例如
-
字体回退策略：
- 定义回退链：提供一系列字体备选方案，确保在主要字体不可用时有替代选择。
body { font-family: 'MyCustomFont', Arial, sans-serif; }
- 定义回退链：提供一系列字体备选方案，确保在主要字体不可用时有替代选择。
总结
字体在前端开发中不仅影响视觉效果，还直接影响用户体验。通过合适的字体选择、优化和引入方式，你可以确保网页在不同设备和浏览器上以最佳方式显示文本。结合现代技术，如 Web 字体服务和优化策略，可以显著提升字体加载性能和用户体验。
二、常见问题
1. FOUT（Flash of Unstyled Text）？
FOUT（Flash of Unstyled Text） 是一种网页渲染中的视觉问题，它指的是在字体或样式加载完成之前，浏览器显示了一个未经样式化的文本“闪烁”现象。
简而言之，就是在页面加载时，用户会看到一段短暂的、使用默认或系统字体显示的文本，直到自定义字体加载完成并应用到文本上为止。
FOUT（Flash of Unstyled Text）是什么
- 定义：FOUT 是指用户在访问网页时，看到一段未应用样式的文本（通常是系统字体）在自定义字体加载完成后才被替换成自定义字体的现象。这种现象通常发生在网页初次加载或字体尚未完全下载时。
- 影响：FOUT 可能会影响网页的用户体验，因为它使得文本在加载过程中看起来与最终样式不一致，可能会让页面显得不专业或混乱。
如何解决 FOUT
为了解决或减轻 FOUT 的问题，可以使用以下几种方法：
1. 使用 font-display CSS 属性
font-display 属性允许你控制字体加载时的显示行为，从而减少 FOUT 的影响。
常用的值包括：
-
swap：- 描述：文本会使用备用字体（如系统字体）直到自定义字体加载完成。自定义字体加载后，备用字体会被替换。
- 示例：
@font-face { font-family: 'MyCustomFont'; src: url('/fonts/MyCustomFont.woff2') format('woff2'); font-display: swap; }
-
fallback：- 描述：与
swap类似，但在字体加载时间较长时可能会保持备用字体的显示。 - 示例：
@font-face { font-family: 'MyCustomFont'; src: url('/fonts/MyCustomFont.woff2') format('woff2'); font-display: fallback; }
- 描述：与
-
optional：- 描述：字体可能不会加载。如果加载时间较长，浏览器会继续使用备用字体。
- 示例：
@font-face { font-family: 'MyCustomFont'; src: url('/fonts/MyCustomFont.woff2') format('woff2'); font-display: optional; }
-
block：- 描述：在字体加载期间，文本会被隐藏。只有当自定义字体加载完成后，文本才会显示。这种方法可能会导致更长时间的空白区域，但可以避免 FOUT。
- 示例：
@font-face { font-family: 'MyCustomFont'; src: url('/fonts/MyCustomFont.woff2') format('woff2'); font-display: block; }
2. 使用字体预加载
通过预加载关键字体可以减少 FOUT。预加载可以确保字体在页面渲染前就被下载：
- HTML 示例：
<link rel="preload" href="/fonts/MyCustomFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
3. 在 JavaScript 中控制字体加载
你可以使用 JavaScript 来更精细地控制字体的加载和显示，减少 FOUT。例如，可以在页面加载后使用 JavaScript 动态插入自定义字体。
4. 自定义字体样式的延迟加载
你可以在字体加载完成之前，使用系统字体作为占位符，并通过 JavaScript 或 CSS 类在字体加载后动态应用自定义样式。
总结
解决 FOUT 问题的主要目的是减少文本在自定义字体加载期间的闪烁效果，使页面在加载过程中看起来更加一致和专业。通过合理使用 font-display 属性、预加载字体以及控制字体的加载行为，可以有效地减轻 FOUT 的影响。
2. 为什么字体是用style的形式加载？
字体通常使用 CSS 的 @font-face 规则通过 <style> 标签或外部样式表加载。这种方式有几个重要的原因，涉及到灵活性、性能和标准化等方面。以下是详细的解释：
1. 统一和标准化
-
标准化：CSS 提供的
@font-face规则是一个标准化的方式来定义和使用自定义字体。它允许开发者通过统一的语法在网页上加载和使用字体，确保在不同浏览器和环境中的一致性。 -
灵活性：通过 CSS，开发者可以在不同的页面和组件中灵活地应用和管理字体。这种方法使得字体的管理更为集中和一致，不需要在 HTML 中重复添加字体链接。
2. 动态和条件加载
-
动态加载：通过 CSS 的
@font-face规则，字体可以在加载时根据条件进行动态控制。例如，可以使用font-display属性来设置字体加载策略（如swap、fallback），以优化用户体验。 -
条件样式：CSS 可以根据不同的状态或媒体查询来应用不同的字体样式。这使得字体的加载和使用能够更好地适应不同的设备和屏幕尺寸。
3. 性能优化
-
字体文件优化：CSS 允许你通过
@font-face规则指定不同的字体格式（如 WOFF2、WOFF、TTF），并提供相关的优化策略。浏览器可以根据这些设置选择最合适的字体格式，从而提高性能。 -
懒加载和延迟加载：可以通过 CSS 结合 JavaScript 来实现字体的懒加载和延迟加载，进一步优化页面性能。例如，使用
font-display属性来控制字体的加载策略，以减少 FOUT（Flash of Unstyled Text）。
4. 样式管理
-
集中管理：将字体定义放在 CSS 样式表中，可以更方便地管理和维护样式。CSS 样式表可以集中定义字体的各种属性，如字体系列、权重、样式等，使得管理和更新字体变得更容易。
-
继承和覆盖：CSS 允许继承和覆盖样式，使得字体的应用更加灵活。例如，可以定义全局字体，然后在特定的组件或页面上覆盖这些字体样式。
5. 示例
在 <style> 标签中定义字体：
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont.woff2') format('woff2'),
url('/fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 控制字体加载策略 */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
</style>
通过外部样式表定义字体：
/* styles.css */
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont.woff2') format('woff2'),
url('/fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 控制字体加载策略 */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
在 HTML 文件中引用：
<link rel="stylesheet" href="styles.css">
总结
将字体通过 CSS 的 @font-face 规则加载是一个标准化和高效的做法，它提供了灵活性和性能优化的可能性。使用 CSS 方式可以集中管理字体样式，确保字体的加载和使用符合现代 Web 开发的最佳实践。同时，这种方式允许开发者控制字体的加载策略，优化用户体验。
三、更多实践
在如下文章中我们介绍过字体在前端项目中的应用：
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
