如何解决字体显示:块仍然导致 FOUT
我将 Adobe Typekit 用于 my website 上的字体。
使用 Adobe Font 的在线界面,我已将 font-display
设置为 block
,因为从本地字体转换到 Typekit 字体往往会非常刺耳。无论字体显示设置如何,总会出现无样式文本 (FOUT) 的闪烁。我的字体有什么问题?
重要的是要提到我的网站基于 Gatsby 并且使用 gatsby-plugin-web-font-loader。
解决方法
从 gatsby-plugin-web-font-loader 切换到 gatsby-omni-font-loader 并在 gatsby-config.js
中使用以下配置解决了问题:
{
resolve: `gatsby-omni-font-loader`,options: {
mode: `render-blocking`,preconnect: [`https://use.typekit.net`],web: [
{
name: `font1`,file: `https://use.typekit.net/${process.env.TYPEKIT_ID}.css`,},{
name: `font2`,],}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。