我正在开发一个Angular应用程序，我注意到每次页面更改时都会加载Google字体。这不是一个完整的页面重新加载，这是一个SPA，我使用角路由。
要加载字体，我从谷歌字体页面复制/粘贴链接。
我在Firebase页面上也看到了这个例子。
我使用的是Chrome版本84.0.4147.89（Official Build）（64-bit）
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">任何想法为什么会发生这种情况，如果这有任何性能发布？
谢谢
1条答案
按热度按时间0wi1tuuw1#
我现在也有同样的问题。在我的例子中，原因是在一些模板中使用了特殊字符（HTML代码）。
HTML符号代码，例如“&”的&或“<”的<，是表示特殊字符的实体。当浏览器在HTML源代码中遇到这些符号代码时，它需要将它们呈现为相应的字符。要做到这一点，浏览器可能需要依赖于一个特定的字体，其中包括这些字符所需的字形。
现在，如果CSS或HTML中引用的字体没有模板中使用的符号所需的字形，浏览器将尝试加载具有这些字形的备用字体。此备用字体可能是完全不同的字体，也可能是包含其他字形的同一字体的变体。
在某些情况下，回退字体加载行为可能导致字体被加载多次。例如，如果CSS中指定的主字体没有符号所需的字形，浏览器可能会加载备用字体以正确呈现这些符号。但是，如果备用字体也不包含所需的字形，则浏览器可能需要加载另一备用字体或重试字体加载过程。这可能导致加载多种字体并影响性能。
所以对于这些地方，我只是提供了
font-family: 'sans-serif'，它解决了这个问题。