gpt4 book ai didi

typography - Gatsby .js : Load Google Fonts for Typography themes without Render-Blocking

转载 作者:行者123 更新时间:2023-12-03 13:06:06 25 4
gpt4 key购买 nike

我正在使用 Gatsby.js和它的 Typography带有 Irving theme 的插件.

此主题需要 Google 字体 "Exo""Yrsa" ,并将导入添加到 <head>导出的静态 html 文件的部分:

<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>

此导入是渲染阻止内容,如果可能,我希望用户和我的 Google PageSpeed Insights 分数都避免使用它。

我尝试使用 gatsby-plugin-google-fonts并将以下内容添加到我的 gatsby-config.js:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Exo\:700`,
`Yrsa\:400,700`,
],
}
},

然而,这只是添加了第二个导入调用。我应该将它们放在静态目录中吗?即便如此,我如何配置 Typography 以在不单独导入它们的情况下仍然使用这些字体?

最佳答案

使用 font-display:swap 可能会获得更好的结果.不幸的是,Google 托管的字体尚不支持此功能,因此,我使用 typeface-* 自行托管我的字体。 npm package由同样制作 Gatsby 的 Kyle 创建。

这也有助于您的应用在没有互联网连接的情况下更好地工作,因为您使用的是 Gatsby,并且您可能会添加离线插件。有些国家甚至可能禁用了谷歌。

如果您还使用排版插件,这里是从 Qards 中提取的示例配置代码:

import Typography from "typography";

let bodyFontFamily = ["Roboto", "Helvetica", "Arial", "sans-serif"];
let headerFontFamily = bodyFontFamily;

const typography = new Typography({
baseFontSize : "16px",
baseLineHeight : 1,
omitGoogleFont : true,
headerFontFamily: headerFontFamily,
bodyFontFamily : bodyFontFamily
});

export default typography;

gatsby-browser.js:
exports.onInitialClientRender = () => {
require("typeface-roboto");
};

关于typography - Gatsby .js : Load Google Fonts for Typography themes without Render-Blocking,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48387721/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com