我创建了一个 style.css 文件并将其插入到 html 文档的末尾。
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="style.css" type = "text/css" />
</body>
</html>
现在我在 google 中测试我的网站.
我没有收到任何错误。
但是当我将这段代码插入到 style.css 的顶部时，我得到了一个错误。
代码:
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: bold;
src: url('../fonts/eot/IRANSansWeb_Bold.eot');
src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
谷歌错误:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
我检查了我的代码。这是因为.woff和.ttf格式。
有什么办法可以解决吗？
我之前阅读过，因为我必须将我的代码更改为:
url("data:application/x-font-woff;charset=utf-8;base64,../fonts/woff/IRANSansWeb_Bold.woff") format('woff'),
这是真的吗？有了那个改变。我没有收到任何其他错误但我不确定更改是否适用于目标浏览器。你怎么看？
最佳答案
Google Page Insights 检查是否可以在不需要外部资源的情况下呈现首屏内容。 由于您使用的是外部字体，因此浏览器必须加载它们才能呈现上面的内容。 尝试使用 sitelocity.com 服务生成关键的 css 部分，看看是否仍然有错误。
关于css - 网络字体避免 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40963946/