使用Typography.js和Gatsby的谷歌字体

Question

我正在学习Gatsby教程，并且已经达到了在代码(https://www.gatsbyjs.org/tutorial/part-three/#using-plugins)中集成排版JS的程度。然而，我在使用谷歌字体时遇到了问题。它们根本不能加载。

下面是我的src/utils/typography.js文件

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  googleFonts: [
    {
      name: "Bonbon",
      styles: ["700"],
    },
    {
      name: "Hanalei",
      styles: ["700"]
    }
  ],
  headerFontFamily: ["Bonbon"],
  bodyFontFamily: ["Hanalei"],
})

export default typography

这是我的gatsby-config.js文件

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

我选择了看起来与标准字体非常不同的字体，这样一旦我让它们工作，我就会立刻知道。然而，我还没能让它们工作。我是不是遗漏了什么？baseFontSize和baseLineHeight都像预期的那样工作，所以正在读取util文件。

Answer 1

这似乎是一个特定于您选择的字体的问题，它们不将样式作为google字体中的选项，在样式中传递一个空数组来解决这个问题

{
  name: "Bonbon",
  styles: [],
},
{
  name: "Hanalei",
  styles: []
}

当调试这类问题时，还要检查开发人员工具中的网络选项卡，以查看是否正确下载了必要的资产，这就是我解决此问题的方法