10

我正在使用Gatsby.js及其带有Irving 主题的Typography插件。

此主题需要 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 以仍然使用这些字体而不单独导入它们？

4

1 回答 1

4

你可能会得到更好的结果font-display:swap。不幸的是，谷歌托管的字体还不支持这个功能，所以，相反，我使用typeface-* npm 包自行托管我的字体，该包由凯尔创建，他也是盖茨比。

这也有助于您的应用在没有互联网连接的情况下更好地工作，因为您使用的是 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;

盖茨比浏览器.js：

exports.onInitialClientRender = () => {
  require("typeface-roboto");
};
于 2018-10-12T19:47:05.357 回答