使用 Typography.js 和 Gatsby 的 Google 字体答案

【问题标题】：Google Fonts using Typography.js and Gatsby使用 Typography.js 和 Gatsby 的 Google 字体
【发布时间】：2019-12-05 14:02:29
【问题描述】：

我正在关注 Gatsby 教程并达到了将 Typography JS 集成到代码中的地步 (https://www.gatsbyjs.org/tutorial/part-three/#using-plugins)。但是，我在使用 Google 字体时遇到了问题。它们根本不加载。

这是我的 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 文件。

【问题讨论】：

标签： gatsby typography google-fonts

【解决方案1】：

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

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

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

【讨论】：