如何通过CSS的url()函数动态加载字体资源？url()优化字体样式管理-css教程-PHP中文网

如何通过CSS的url()函数动态加载字体资源？url()优化字体样式管理

爱谁谁

发布： 2025-08-28 13:47:01

原创

840人浏览过

使用@font-face和url()定义字体路径，通过JavaScript或Font Loading API实现动态加载，结合font-display控制显示行为，预加载与子集化优化性能，并配置CORS解决跨域问题。

如何通过css的url()函数动态加载字体资源？url()优化字体样式管理

在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
```
登录后复制
属性控制字体加载期间的行为。常用的值包括：

怪兽AI数字人
数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情
- ```
swap
```
  登录后复制
  : 先显示系统字体，字体加载完成后切换到自定义字体（可能导致FOUT）。
- ```
fallback
```
  登录后复制
  : 先显示系统字体，如果在短时间内字体没有加载完成，则一直显示系统字体。
- ```
optional
```
  登录后复制
  : 与
```
fallback
```
  登录后复制
  类似，但浏览器可以根据网络状况决定是否加载字体。
- ```
block
```
  登录后复制
  : 先隐藏文本，直到字体加载完成才显示（可能导致FOIT）。
- ```
auto
```
  登录后复制
  : 浏览器默认行为。
```
@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
```
登录后复制
头部。