angular - 使用 Angular CLI 预加载字体

问题描述

编辑：AFAIK 这不是Webpack 在输出时禁用图像名称散列的副本，因为：

webpack.config 在当前的 angularCli 版本中不再可编辑。

我想保留文件名的哈希值以进行缓存清除。

我正在使用 Angular，我想预加载我的字体，我尝试使用

  <link rel="preload" href="assets/someFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

然而，在构建过程中，我的字体有角度散列，所以我的字体将被复制到根文件夹并重命名为看起来像这样。

myFont.e31fcf1885e371e19f57.woff2

我的@fontface 参考将指向该字体。

所以最后我实际上是两次加载相同的字体而不是预加载字体，因为浏览器看到不同的 URL

/assets/myFont.woff2
myFont.e31fcf1885e371e19f57.woff2

如何预加载字体并保留散列功能（用于缓存清除）？

标签： angularoptimization

定义字体时使用资产文件夹的绝对路径，这将防止在部署时对字体文件进行散列：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans'), local('OpenSans'), url('/assets/fonts/open-sans.woff') format('woff');
}

然后在你的字体文件中添加一个硬链接index.html：

    ...
    <link rel="preload" href="/assets/fonts/open-sans.woff" as="font" crossorigin>
  </head>

angular - 使用 Angular CLI 预加载字体

问题描述

解决方案

推荐阅读