css - 使用 Wordpress 中的字体添加“预加载”
问题描述
使用节点模块,我将此文件添加到我的主题中。但它显示在“Google Pagespeed Insight”中。考虑使用<link rel=preload>
优先获取页面加载中稍后请求的资源。
在我的 CSS 文件中,它是这样导入的。
@font-face {
font-family: 'Graphik Web';
src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
但它仍然不像谷歌 Pagespeed Insight 的报告那样工作。如果我认为遗漏了什么或添加了什么,请告诉我。
解决方案
要摆脱该错误,您必须摆脱 @import (这里转换为 src url)。@import 指令阻止并行下载。您必须更改代码以使用链接标记在主 html 中导入 woff。
推荐阅读
- javascript - 如何动态导入、修改和导出矢量文件?
- python - 如何在 64 位上使用格式字符串漏洞写入地址
- java - @Transactional 在带有 CrudRepository 的 Spring Boot 中不起作用
- internet-explorer - 有没有办法将 Webdriver 切换到打开新窗口并自动关闭父窗口的新会话?
- java - 绑定2个arraylists android
- python - selenium web 抓取中 .send_keys 的意外令牌错误
- apache-spark - 惰性数据结构的工作原理
- javascript - 即使使用布尔开关,Javascript 倒数计时器也太快了
- html - 角度 html 页面中的 URL 未呈现正确的页面
- json - 使用项目 1 的服务帐户 Json 密钥从项目 2 中的 Python Cloud Function 访问 Project1 的 BigQuery DataStore