优化 Material Symbols 字体加载速度：按需引入可变字体

理解 Material Symbols 字体加载慢的原因

material symbols 是一套功能强大且美观的图标字体，它利用了可变字体（variable font）的特性，允许开发者通过css属性灵活调整图标的光学尺寸（opsz）、字重（wght）、填充（fill）和渐变（grad）等多个维度。然而，这种灵活性也带来了潜在的性能问题。

默认情况下，当您通过Google Fonts提供的标准URL（例如 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');）引入Material Symbols 字体时，它会尝试加载包含所有或大部分可用变体的字体文件。这意味着字体文件体积会非常庞大，通常达到数MB（例如2.7MB甚至4MB）。在网络条件不佳（如Fast 3G）的情况下，加载这样一个大文件可能需要数十秒，严重影响网站的首屏加载速度和用户体验。相比之下，其他普通字体文件通常仅需数百毫秒即可加载完成。

核心优化策略：按需定制字体请求

解决Material Symbols字体加载缓慢问题的关键在于按需加载。Google Fonts允许我们通过URL参数精确控制需要加载的字体变体，从而显著减小字体文件的体积。

Material Symbols 字体请求URL的基本结构如下：

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

在此基础上，我们可以通过添加 :opsz,wght,FILL,GRAD@value 格式的参数来定制字体。这些参数分别代表：

• opsz (Optical Size，光学尺寸)：图标的视觉大小，通常范围在20到48之间。
• wght (Weight，字重)：图标的粗细程度，通常范围在100到700之间。
• FILL (Fill，填充)：图标的填充状态，0表示描边（outlined），1表示实心（filled）。
• GRAD (Grade，渐变)：图标的视觉等级或对比度，通常范围在-50到200之间。

通过指定这些参数的精确范围或单个值，Google Fonts会生成一个仅包含您所需变体的更小的 woff2 字体文件。

实践：定制 Material Symbols 字体加载URL

假设您的网站只需要字重在100到400之间的图标，并且只需要描边和实心两种填充状态，而不需要调整光学尺寸和渐变。您可以这样构建定制的字体请求URL：

原始（默认）请求示例：

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

这个URL会加载所有或大部分变体，导致文件体积巨大。

优化后的定制请求示例：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..400,0..1');

在这个优化后的URL中：

• 我们移除了 opsz 和 GRAD 参数，意味着它们将使用默认值。
• wght@100..400 指定只加载字重从100到400的变体。
• FILL@0..1 指定只加载填充状态为0（描边）和1（实心）的变体。

通过这种方式，字体文件大小可以从数MB（例如4MB）大幅减小到数百KB（例如700KB），从而显著提升加载速度。

集成定制字体到您的项目

将优化后的字体请求URL集成到您的项目中非常简单。您可以通过CSS的 @import 规则直接引入，或者通过HTML的 <link> 标签引入。

使用 @import 引入 (推荐在CSS文件的顶部)：

/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..400,0..1');

/* 定义 Material Symbols Outlined 字体样式 */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; /* 默认使用字体文件中定义的权重范围 */
  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;
}

/* 示例：根据需要调整图标的字重和填充 */
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1; /* 应用实心填充 */
}

.material-symbols-outlined.light-weight {
  font-variation-settings: 'wght' 200; /* 应用较轻的字重 */
}

当您访问上述定制URL时，Google Fonts会返回一个CSS文件，其中包含了针对您所选变体的 @font-face 规则，类似于以下结构：

/* fallback - 这是一个示例，实际的woff2 URL会由Google Fonts生成 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 400; /* 这里定义了字体文件包含的字重范围 */
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/vXXX/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
  /* 注意：实际的woff2 URL会非常长且复杂，由Google Fonts动态生成 */
}

/* 后续的 .material-symbols-outlined 类定义与上述示例相同 */

在HTML中使用定制的图标：

<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined filled">star</span>
<span class="material-symbols-outlined light-weight">settings</span>

注意事项与最佳实践

1. 精确评估需求： 在定制URL之前，仔细检查您的设计稿和项目需求，确定您实际需要哪些图标变体（例如，是否真的需要所有字重，或者只需要描边和实心）。过度定制可能导致某些图标样式无法加载，而不足定制则会增加文件体积。
2. 利用 font-variation-settings： 引入定制字体后，您仍然可以通过 font-variation-settings CSS属性在前端动态调整图标的 wght、FILL 等属性，前提是您在URL中包含了这些变体的范围。
3. 缓存效应： 尽管首次加载优化后的字体文件速度会大大提升，但一旦文件被浏览器缓存，后续访问速度会更快。因此，优化首屏加载仍然是重中之重。
4. 本地托管字体： 如果您对Google Fonts的CDN速度仍不满意，或者有严格的隐私要求，可以考虑将优化后的 woff2 字体文件下载到本地服务器进行托管。这通常需要您通过浏览器开发者工具检查网络请求，获取Google Fonts返回的 woff2 文件URL并下载。
5. 替代方案：SVG图标： 对于图标数量较少或需要极致性能的场景，使用SVG图标（尤其是内联SVG或SVG Sprites）可能是更优的选择。SVG通常具有更好的可访问性、可伸缩性和更小的文件体积。
6. 测试与监控： 在不同网络条件下（如使用Chrome开发者工具的Network Throttling功能）测试优化效果，并持续监控网站的性能指标，确保优化措施达到预期效果。

通过上述定制化策略，您可以显著提升使用 Material Symbols 字体时的网站加载性能，为用户提供更流畅的体验。

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