使用 Angular CLI 预加载字体答案

【问题标题】：Preloading fonts using angular CLI使用 Angular CLI 预加载字体
【发布时间】：2019-07-23 21:11:43
【问题描述】：

编辑：AFAIK 这不是 Webpack disable hashing of image name on output 的副本，因为：

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

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

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

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

然而，在构建过程中 angular 会对我的字体进行散列处理，因此我的字体将被复制到根文件夹并重命名为如下所示。

myFont.e31fcf1885e371e19f57.woff2

我的@fontface 引用将指向该字体。

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

/assets/myFont.woff2
myFont.e31fcf1885e371e19f57.woff2

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

【问题讨论】：

如果我理解正确那个答案假设我可以控制 webpack.config，但我没有。 AngularCLI 不再提供它。@jcuypers
我不同意，这不是一个重复的问题。这是一个不同而独特的问题。仅仅因为解决方案可能是相同的，它不会使其重复。 @jcuypers
还不错。无论如何，为了提供帮助，我没有摆弄它。话虽如此，我部分记得我在同一个 webpack 缺失的故事中，并转到类似替代构建系统的东西以允许更改：ngx-build-plus github.com/manfredsteyer/ngx-build-plus。也许这可以帮助你
您找到解决方案了吗？
并非如此。我最终在 CDN 中使用字体而不是使用本地字体。

标签： angular optimization

【解决方案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>

【讨论】：

【解决方案2】：

为了防止资产文件夹中的字体文件散列，您必须在 angular.json 中包含资产，如下所示：

"assets": [{
            "glob": "**/*",
            "input": "src/assets",
            "output": "assets"
          }]

而不是

"assets": ["src/assets"]

【讨论】：

这似乎不适用于ionic build --prod。
这是我当前的设置，但这不是我所要求的（除非我没有看到某些东西）。 “如何预加载字体并保留散列功能（用于缓存清除）？”

【解决方案3】：

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

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

【讨论】：

这是我当前的设置，但我还想预加载字体，而不仅仅是使用它们。