CSS中url()动态加载字体方法

在CSS中，`url()`函数是指定字体等资源路径的关键。本文深入探讨如何利用`url()`实现CSS字体的动态加载，旨在优化网页加载速度和用户体验。文章详细介绍了通过`@font-face`规则定义字体，并结合JavaScript或Font Loading API按需应用字体的方法。同时，针对字体闪烁问题，提出了利用`font-display`属性和Font Loading API的解决方案。此外，还讨论了字体文件大小优化策略，包括使用WOFF2格式、字体子集化，以及处理跨域字体加载问题的CORS配置，为开发者提供一套完整的CSS字体样式管理和优化方案。通过本文，你将掌握如何高效地在CSS中使用`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" 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）。
  • 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属性: 在标签中，使用crossorigin属性，告诉浏览器允许跨域加载字体。

  <link rel="preload" href="path/to/my-custom-font.woff2" as="font" type="font/woff2" crossorigin>

  如果字体文件不需要凭据（例如cookie），可以使用crossorigin属性，否则需要设置正确的Access-Control-Allow-Credentials头部。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~