优化 Material Symbols 字体加载性能：按需引入与配置

问题根源：Material Symbols 字体加载缓慢

在网页设计中，material symbols 字体因其美观和易用性而广受欢迎。然而，许多开发者发现其加载速度远超预期，有时甚至长达数十秒，特别是在网络条件不佳（如 fast 3g）的环境下。这主要是因为默认的 material symbols 字体导入方式，例如通过 google fonts api 的 css @import 或 html <link> 标签，会加载一个包含所有可用变体（包括光学尺寸 opsz、字重 wght、填充 fill 和灰度 grad）的庞大字体文件。这个文件通常高达数兆字节（例如 2.7 mb 或 4 mb），导致首次加载时耗时过长，严重影响用户体验。

例如，以下默认导入方式：

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

会请求并下载包含所有 opsz (20到48)、wght (100到700)、FILL (0到1) 和 GRAD (-50到200) 范围的字体数据，这正是导致文件体积巨大的主要原因。

解决方案：定制化 Google Fonts API 请求

解决 Material Symbols 字体加载缓慢问题的关键在于“按需加载”——只请求和下载网站实际使用的字体变体。Google Fonts API 允许我们通过调整请求 URL 来精确控制所需字体的参数。

理解字体变体参数

Material Symbols 字体支持以下可变参数：

• opsz (Optical Size)：光学尺寸，影响图标的视觉大小。默认范围通常是 20 到 48。
• wght (Weight)：字重，影响图标的粗细。默认范围通常是 100 到 700。
• FILL (Fill)：填充状态，0 表示描边图标，1 表示实心图标。
• GRAD (Grade)：灰度或视觉强度，影响图标的明暗和对比度。默认范围通常是 -50 到 200。

构建优化请求 URL

基础的 Material Symbols Outlined 字体请求 URL 如下：

https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined

要进行优化，我们可以在其后添加冒号 :，然后列出需要定制的参数，再使用 @ 符号指定这些参数的具体范围或值。

例如，如果您的网站只使用字重介于 100 到 400 之间、且仅使用描边（FILL=0）和实心（FILL=1）两种状态的图标，则可以这样构建请求：

https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..400,0..1

在这个 URL 中：

• :wght,FILL 指定了我们只关注 wght 和 FILL 这两个参数。
• @100..400,0..1 对应地指定了 wght 的范围是 100 到 400，FILL 的范围是 0 到 1。

通过这种方式，您可以完全移除不需要的参数（如 opsz 和 GRAD），或者将参数范围限制到实际使用的最小集合。例如，如果只使用默认光学尺寸和中等字重，且不需要 GRAD，则可以进一步精简。

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

47

查看详情

示例代码：优化后的 CSS @import

将上述优化后的 URL 应用到您的 CSS 文件中：

/* 优化后的 Material Symbols Outlined 字体导入 */
/* 仅加载字重 100 到 400，以及填充状态 0 (描边) 和 1 (实心) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..400,0..1');

经过这样的优化，字体文件的大小可以从数 MB 大幅缩减到数百 KB，从而显著提升加载速度。

高级优化：自托管与 @font-face

对于更精细的控制和潜在的性能提升，您可以选择自托管优化后的字体文件。首先，使用上述优化后的 Google Fonts API URL 在浏览器中访问，Google Fonts 会返回一个 CSS 文件，其中包含了指向具体 woff2 字体文件的 @font-face 规则。您可以复制这个 woff2 文件的 URL，并将其下载到您的服务器上，然后通过自定义 @font-face 规则来引入。

示例代码：自托管 @font-face 和 CSS 类

/* fallback 或自托管 Material Symbols Outlined 字体 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  /* 这里的 font-weight 范围应与您请求的 wght 范围一致 */
  font-weight: 100 400; 
  /* 替换为您的优化后 woff2 字体文件的实际路径 */
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v122/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
  /* 建议添加 font-display 属性，如 'swap'，以改善字体加载的用户体验 */
  font-display: swap; 
}

/* Material Symbols 图标的通用样式 */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; /* 可以根据需要调整，或在 HTML 中通过 CSS 变量控制 */
  font-style: normal;
  font-size: 24px; /* 默认图标大小 */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga'; /* 启用连字特性，允许使用文本名称表示图标 */
  -webkit-font-smoothing: antialiased; /* 抗锯齿优化 */
}

在 HTML 中使用时，只需为需要显示 Material Symbols 图标的元素添加 material-symbols-outlined 类，并使用图标的文本名称：

<span class="material-symbols-outlined">
  home
</span>
<span class="material-symbols-outlined">
  settings
</span>

使用与注意事项

1. 确定所需变体：在实施优化之前，仔细审查您的设计稿和现有代码，确定实际使用的 Material Symbols 图标的 opsz、wght、FILL 和 GRAD 值。只引入必需的变体，是实现最大优化的前提。
2. 测试效果：在不同网络条件下（例如使用 Chrome DevTools 的网络限流功能）测试优化前后的页面加载速度，以验证优化效果。您会发现字体文件大小和加载时间有显著改善。
3. 缓存机制：虽然优化主要针对首次加载，但浏览器会缓存字体文件。一旦字体文件被缓存，后续页面加载速度会很快。因此，减小首次加载的文件大小至关重要。
4. font-display 属性：在 @font-face 规则中添加 font-display: swap; 属性，可以告知浏览器在字体加载期间使用系统默认字体显示文本，待字体加载完成后再进行切换，从而避免文本在加载期间不可见的“空白文本”问题，提升用户体验。
5. 维护与更新：如果您的网站未来需要引入新的 Material Symbols 图标变体，请记得更新您的字体请求 URL 或自托管的字体文件，以确保新变体能够正确加载。

总结

Material Symbols 字体加载缓慢是一个常见的性能瓶颈，但通过定制化 Google Fonts API 请求，我们可以精确控制所需字体变体的加载，从而大幅减小字体文件体积，加速页面渲染。无论是通过优化的 @import URL 还是自托管 @font-face，这种按需加载的策略都是提升网站性能和用户体验的有效手段。在实践中，务必根据您的具体需求仔细评估并选择最适合的优化方案。

以上就是优化 Material Symbols 字体加载性能：按需引入与配置的详细内容，更多请关注php中文网其它相关文章！