避免“在首屏内容中消除渲染阻止 JavaScript 和 CSS”的网络字体答案

【问题标题】：web fonts avoiding 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'避免“在首屏内容中消除渲染阻止 JavaScript 和 CSS”的网络字体
【发布时间】：2016-12-04 21:35:19
【问题描述】：

我创建了一个 style.css 文件并将其插入到 html doc 的末尾。

<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');
    }

谷歌错误：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS

我检查了我的代码。这是因为.woff 和.ttf 格式。

这些有什么办法解决吗？

我必须将代码更改为以下内容：

url("data:application/x-font-woff;charset=utf-8;base64,../fonts/woff/IRANSansWeb_Bold.woff") format('woff'),

这是真的吗？随着那个变化。我没有收到任何错误但我不确定更改是否适用于目标浏览器。你觉得呢？

【问题讨论】：

标签： css seo font-face google-pagespeed

【解决方案1】：

Google Page Insights 检查是否可以在不需要外部资源的情况下呈现上述首屏内容。由于您使用的是外部字体，因此浏览器必须加载它们才能呈现上述折叠内容。尝试使用 sitelocity.com 服务生成关键的 css 部分，看看是否仍有错误。

【讨论】：