Angular Material PWA如何预获取样式表内嵌套的Web Font？

安全阿岳

2026-7-24

问题解决方案

一、预加载嵌套在样式表中的Material Icons Two Tone字体

你提到的用不可见元素触发加载的思路完全可行，具体实现可以这样做：

在应用根组件模板中添加一个视觉隐藏但仍能触发字体加载的元素，示例代码如下：
```
<span style="position: absolute; left: -9999px; top: -9999px; font-family: 'Material Icons Two Tone';">&#xE000;</span>
```
用绝对定位把元素移出视口，指定对应字体族后再加入该字体的任意图标字符（比如），浏览器会自动识别并加载目标字体文件，彻底避免首次使用时的闪烁问题。
也可以通过CSS优化字体加载行为缓解闪烁：给@font-face添加font-display: swap规则，让浏览器先显示备用字体，等目标字体加载完成后再替换。你需要在CDN样式表之后加载自定义样式来覆盖规则，示例代码：
```
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconstwotone/v112/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format('woff2');
  font-display: swap;
}
```
这种方式无法提前加载字体，但能优化首次显示的用户体验。

二、PWA是否必须自托管这些字体？

不需要强制自托管，你可以继续使用CDN提供的字体文件，结合浏览器缓存和Service Worker实现离线可用：

浏览器缓存：Google Fonts这类主流CDN会给字体文件设置较长的缓存过期时间，浏览器会自动缓存这些资源，后续访问无需重复下载。

Service Worker缓存：在Angular的ngsw-config.json配置文件中，将CDN字体相关URL加入assetGroups的缓存规则，示例配置：

{
  "assetGroups": [
    {
      "name": "material-icons",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "urls": [
          "https://fonts.gstatic.com/s/materialiconstwotone/**",
          "https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone"
        ]
      }
    }
  ]
}

配置完成后，Service Worker会在应用安装或更新时预获取这些资源，确保离线状态下字体仍能正常加载。

需要注意的是，Google Fonts等主流CDN默认支持跨域缓存，不会存在跨域访问的问题。

内容的提问来源于stack exchange，提问作者NoRyb

Angular Material PWA如何预获取样式表内嵌套的Web Font？

一、预加载嵌套在样式表中的Material Icons Two Tone字体 #

二、PWA是否必须自托管这些字体？ #

一、预加载嵌套在样式表中的Material Icons Two Tone字体

二、PWA是否必须自托管这些字体？