angular - 预加载由 Angular CLI 插入的动态生成的字体文件

Question

我开始采用 <link rel="preload">一些字体的策略，并通过使用 Lighthouse 审核工具，我已经找到了一些不错的候选者。

Lighthouse 向我推荐了 5 个，其中 3 个是静态的，因此很容易预加载。它们采用以下形式:

<link rel="preload" href="/fonts/my-font.woff" as="font" type="font/woff">

另外 2 个由 Angular 动态生成，并在运行时插入到我的 HTML 中。这些字体的问题是它们的名称为 my-font.sr7er987f.woff我怀疑每次构建和部署我的应用时这个值都会不同。

我很好奇是否有办法设置动态 href我的属性 <link>那可以捕获这些字体？类似于 <link rel="preload" href="fonts/my-font.*.woff" .

谢谢

Answer 1

我遇到了同样的困境，想出了一个简单的 bash 脚本，可以在部署前立即使用。

#!/bin/bash
for filename in ./path/*.ttf; do
  [ -e "$filename" ] || continue
  one=${filename#*./path/}
  two=${one%.*.ttf}
  three=${two%-*}
  salt=${one#*.}
  salt=${salt%.*}

  printf "Font:\n"
  printf 'assets/fonts/'"$three"'/'"$two"'.ttf\n'
  printf "was replaced with:\n"
  printf "$three"'.'"$salt"'.ttf\n'

  sed -i -e 's/assets\/fonts\/'"$three"'\/'"$two"'.ttf/'"$two"'.'"$salt"'.ttf/g' ./path/index.html
  printf "===SUCCESS===\n"

done

这不是一个优雅的解决方案，但它完成了工作，替换:

<link rel="preload" href="assets/fonts/Raleway/Raleway-Regular.ttf" as="font" crossorigin="anonymous">

与

<link rel="preload" href="Raleway-Regular.580d0778ad254335be45.ttf" as="font" crossorigin="anonymous">

因此您需要做的就是配置路径并在 index.html 中声明字体。话虽如此，我注意到现在这些字体以某种方式被下载了两次，一次是预加载，另一次是在样式表请求时(？)。不过，这可能只是缓存问题或其他问题。