2 
<!DOCTYPE html>
<html>
  <head>
    <title>BookNotes</title>

    <meta charset="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <meta httpEquiv="Content-Language" content="en" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

我有这个 html 页面，我想使用 Roboto 字体样式表，但是在我使用它的方式上，Lighthouse 给了我这个警告：

在此处输入图像描述

优化它的最佳方法是什么？我读过我可以使用defer或async属性，以在渲染后以异步方式加载它，但如果我在渲染后加载它，它将不会为我的字体等应用样式。将非常感谢您的帮助。如果您需要更多信息，请告诉我。

4

2 回答 2

1

我找到了更好的解决方案：

 <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      media="print"
      onload="this.media='all'"
    />

这运作良好

于 2019-10-14T09:04:45.473 回答
1

就个人而言，我认为处理这个问题的最好方法是异步加载字体。但是，这可能会导致字体闪烁，这意味着字体首先是默认字体，然后会重新呈现为新加载的字体。为了解决这个问题，您可以隐藏页面的内容，直到字体被加载，并通过回调显示它。你可以看看webfontloader。当有人禁用 JS 时，您还必须对极少数情况进行后备。

JavaScript

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['Roboto']
  }
});
document.querySelector('html').classList.remove('no-js')

CSS

html {opacity: 0;}
html .wf-active, html.wf-inactive, html.no-js {opacity: 1;}

HTML

<html lang="en" class="no-js">
于 2019-10-14T07:37:04.953 回答