改进@font-face url 以提高性能答案

【问题标题】：Improve @font-face url for performance改进@font-face url 以提高性能
【发布时间】：2020-12-31 00:20:16
【问题描述】：

我有定义为的字体

@font-face {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: normal;
    src: local("Manrope Regular"),local("Manrope-Regular"), url("#{$staticPath}fonts/Manrope-Regular.ttf");
    font-display: swap;
}

现在灯塔报告对此有疑问

如何优化它并让这条消息消失？

如果它是一个链接，preload 会派上用场，但这是一个现有的代码库，我现在不能真正洗牌，因为定义了很多字体。

一直在阅读https://www.paulirish.com/2009/fighting-the-font-face-fout/ 和一些关于 CSS 技巧的相关帖子，但所有这些都提到了控制可见性和防止 FOUT 以及处理一些跨浏览器问题。但是 Paul Irish 或 CSS 技巧回答的 SO 线程都没有专门讨论 preloading 这个@font-face。

我想这里的问题是，我可以在不使用<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" /> 的情况下使用 Javascript 预取吗？

【问题讨论】：

标签： html css reactjs performance web

【解决方案1】：

可能是因为服务器很慢。你可以通过谷歌字体嵌入这个字体：https://fonts.google.com/specimen/Manrope?query=manro

您需要将此添加到站点中的 -tag 中：<link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">

【讨论】：