使用@font-face和url()定义字体路径，通过JavaScript或Font Loading API实现动态加载，结合font-display控制显示行为，预加载与子集化优化性能，并配置CORS解决跨域问题。
在css中，
url()
函数用于指定资源的路径，包括字体。动态加载字体资源意味着我们不希望一开始就加载所有字体，而是根据需要加载，这可以提高页面加载速度，尤其是在字体文件较大的情况下。关键在于控制何时以及如何使用
url()
引用这些字体。
解决方案
-
使用
@font-face
规则定义字体: 这是加载自定义字体的标准方法。在
@font-face
中，使用
url()
指定字体文件的路径。
@font-face { font-family: 'MyCustomFont'; src: url('path/to/my-custom-font.woff2') format('woff2'), url('path/to/my-custom-font.woff') format('woff'); font-weight: normal; font-style: normal; } -
按需应用字体: 关键在于不在页面初始加载时立即使用该字体。可以先使用系统默认字体，然后通过JavaScript事件（例如，用户交互、页面滚动到特定位置）或者CSS媒体查询，动态地将
font-family
应用到相应的元素。
立即学习“前端免费学习笔记（深入）”；
/* 初始样式，使用系统字体 */ body { font-family: sans-serif; } /* 动态加载字体后的样式 */ body.custom-font-loaded { font-family: 'MyCustomFont', sans-serif; /* 'MyCustomFont' 是我们定义的字体 */ }// JavaScript 示例 (使用classList添加类) window.addEventListener('load', function() { // 模拟字体加载完成 (实际情况需要监听字体加载事件，见下文) setTimeout(function() { document.body.classList.add('custom-font-loaded'); }, 1000); // 延迟1秒，模拟字体加载时间 });
-
使用Font Loading API: 现代浏览器提供了Font Loading API，可以更精确地控制字体的加载。可以监听字体加载状态，并在字体加载完成后执行相应的操作。
// 检查字体是否已经加载 document.fonts.load('1em MyCustomFont').then(function() { // 字体加载完成 document.body.classList.add('custom-font-loaded'); }); -
预加载字体（Preload）： 如果确定某个字体稍后一定会用到，可以使用
<link rel="preload">
预加载字体，这样可以提前开始下载字体，但不会阻塞页面的渲染。
<link rel="preload" href="path/to/my-custom-font.woff2" as="font" type="font/woff2" crossorigin>
注意：
crossorigin
属性可能需要根据你的服务器配置进行调整。
如何避免字体闪烁（FOIT/FOUT）？
字体闪烁（Flash of Invisible Text/Flash of Unstyled Text）是指在自定义字体加载完成之前，浏览器先显示系统默认字体，然后切换到自定义字体时出现的视觉跳跃。解决这个问题的方法：
-
使用
font-display
属性:
font-display
属性控制字体加载期间的行为。常用的值包括：
-
swap
: 先显示系统字体，字体加载完成后切换到自定义字体（可能导致FOUT）。
-
fallback
: 先显示系统字体，如果在短时间内字体没有加载完成，则一直显示系统字体。
-
optional
: 与
fallback
类似，但浏览器可以根据网络状况决定是否加载字体。
-
block
: 先隐藏文本，直到字体加载完成才显示（可能导致FOIT）。
-
: 浏览器默认行为。
@font-face { font-family: 'MyCustomFont'; src: url('path/to/my-custom-font.woff2') format('woff2'), url('path/to/my-custom-font.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; /* 或者使用其他值，根据需求选择 */ } -
-
结合Font Loading API和
font-display
: 使用Font Loading API监听字体加载完成事件，并在字体加载完成后再显示文本，可以避免FOIT。同时，使用
font-display: optional
可以允许浏览器根据网络状况决定是否加载字体，从而提高用户体验。
如何优化字体文件大小？
字体文件的大小直接影响页面加载速度。优化字体文件大小的方法：
- 使用WOFF2格式: WOFF2是一种现代字体格式，压缩率比WOFF更高。
- 只包含需要的字符集: 许多字体包含大量的字符，但我们通常只需要使用其中的一部分。可以使用字体编辑工具（例如FontForge）或者在线字体裁剪工具，只保留需要的字符集。
- 使用字体子集化服务: 许多在线服务（例如google Fonts）提供字体子集化功能，可以根据你的网站内容自动生成只包含所需字符的字体文件。
- 压缩字体文件: 使用gzip或Brotli压缩字体文件，可以进一步减小文件大小。确保服务器配置正确，以便浏览器可以正确解压压缩后的字体文件。
如何处理跨域字体加载问题？
如果字体文件托管在不同的域名下，可能会遇到跨域问题。解决跨域问题的方法：
-
设置CORS头部: 在托管字体文件的服务器上，设置
Access-Control-Allow-Origin
头部，允许跨域访问。
Access-Control-Allow-Origin: * // 允许所有域名访问 Access-Control-Allow-Origin: https://your-domain.com // 只允许特定域名访问
-
使用
crossorigin
属性: 在
<link rel="preload">
标签中，使用
crossorigin
属性，告诉浏览器允许跨域加载字体。
<link rel="preload" href="path/to/my-custom-font.woff2" as="font" type="font/woff2" crossorigin>
如果字体文件不需要凭据（例如Cookie），可以使用
crossorigin
属性，否则需要设置正确的
Access-Control-Allow-Credentials
头部。
