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

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

在CSS中，

url()

url()

解决方案

1. 使用

   @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;
   }

2. 按需应用字体: 关键在于不在页面初始加载时立即使用该字体。可以先使用系统默认字体，然后通过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秒，模拟字体加载时间
   });

3. 使用Font Loading API: 现代浏览器提供了Font Loading API，可以更精确地控制字体的加载。可以监听字体加载状态，并在字体加载完成后执行相应的操作。

   // 检查字体是否已经加载
   document.fonts.load('1em MyCustomFont').then(function() {
     // 字体加载完成
     document.body.classList.add('custom-font-loaded');
   });

4. 预加载字体（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）是指在自定义字体加载完成之前，浏览器先显示系统默认字体，然后切换到自定义字体时出现的视觉跳跃。解决这个问题的方法：

会译·对照式翻译

会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

下载

• 使用

  font-display

  属性:

  font-display

  属性控制字体加载期间的行为。常用的值包括：

  • 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

  头部。