使用角度CLI预加载字体

Question

编辑：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

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

Answer 1

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

@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>

Answer 2

以下行动对我有所帮助。将字体文件传输到资产文件夹。在样式中设置字体的绝对路径。

@font-face {
    font-family: 'CoreSans';
    font-style: normal;
    src: url('/assets/fonts/CoreSans.woff') format('woff');
}