Question

我创建了一个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');
    }

Google中的

错误：

消除上层内容中的渲染阻止JavaScript和CSS

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

这有什么方法可以解决它吗？

我读过因为我必须将我的代码更改为：

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

这是真的吗？随着这种变化。我没有收到任何其他错误但我不确定该更改是否适用于目标浏览器。你觉得怎么样？

Answer 1

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

网页字体避免＆＃39;消除渲染阻止JavaScript和CSS的首要内容＆＃39;

1 个答案: