Question

我开始对某些字体采用<link rel="preload">策略，并且通过使用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中声明字体。说完这些，我注意到现在这些字体以某种方式下载了两次，一次是作为预加载，另一次是在样式表（？）要求时。不过，这可能只是一个缓存问题。

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

1 个答案: