Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/api/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Webpack 如何使用字体显示：交换；用于roboto字体类星体应用程序_Webpack_Quasar Framework_Quasar - Fatal编程技术网
Fatal编程技术网
  • webpack/
  • Webpack 如何使用字体显示：交换；用于roboto字体类星体应用程序

Webpack 如何使用字体显示：交换；用于roboto字体类星体应用程序

webpack

Webpack 如何使用字体显示：交换；用于roboto字体类星体应用程序,webpack,quasar-framework,quasar,Webpack,Quasar Framework,Quasar,目前我在我的quasar.config中使用'roboto-font' extras: [ 'roboto-font' ], 但当我在网上运行chrome light house score时，它会给我 确保文本在webfont加载问题期间保持可见 这需要字体显示：swap在@font-face中，但是如果我查看我的构建，就会发现@font-face{font-family:Roboto；font-style:normal；font-weight:300；src:url（.

目前我在我的
quasar.config中使用
'roboto-font'


extras: [
      'roboto-font'
    ],


但当我在网上运行chrome light house score时，它会给我

确保文本在webfont加载问题期间保持可见


这需要
字体显示：swap
在
@font-face
中，但是如果我查看我的构建，就会发现
@font-face{font-family:Roboto；font-style:normal；font-weight:300；src:url（../fonts/KFOlCnqEu92Fr1MmSU5fBBc-.865f928c.woff）格式（
vendor.js
中的字体配置类型。如何使CLI为字体加载时间添加字体交换？
在
extras
中注释掉
'roboto-font'
，并将其添加到您的
index.template.html
：


<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"></noscript>






如果只添加字体链接，Lighthouse将为您提供“消除渲染阻塞资源”的额外代码：


<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">