Gatsby 和 Netlify 在线版本的字体问题
Fonts problems with online version with Gatsby & Netlify
我正在使用 gatsby，我使用 netlify 进行部署，但 google 字体有问题。我正在使用 Raleway (H1) 和 Open Sans（正文）。我尝试在 css 中导入字体，它在本地工作，而不是在 netlify 上使用在线版本，我尝试在 "gatsby-plugin-google-font" 中工作，但在 netlify 上不工作。我不知道问题出在哪里。您可以在此处查看网站：https://syter.fr
有任何想法吗 ？
谢谢:)
最好在没有看到样式代码的情况下进行猜测 — 它 看起来 只是一个 CSS 特异性错误，而不是 Gatsby 或 Netlify 特有的错误。您可以在 devtools "Network" 选项卡中验证字体是否已正确加载；如果 select 一个文本元素呈现不正确，您会看到正确的字体（例如 "Open Sans"）被一种或多种其他字体遮盖了。在 devtools 中禁用时，你会得到你想要的字体：
深入研究您的 index.css 文件，我看到：
font-family 在 body 块中多次声明； georgia,serif 优先于 Open Sans.
同样，您有针对 header 元素具有竞争特异性的规则；例如，
h1,h2 {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
// ...
}
// [futher down]
.landing h1 {
font-family: Raleway,sans-serif
}
知道这些 CSS 规则的来源吗？我将从那里开始。
关于您在 运行ning 本地与 Netlify 上看到不同结果的原因 — 请记住，您从 运行ning gatsby develop 看到的结果 不是 相当于将要部署的内容，因为 Gatsby 在 "develop" 模式下削减了一些角落以启用 hot-reloading 和诸如此类的东西，并在 "build" 模式下为生产性能进行了大量优化...... 99% 的时间结果是相同的，但偶尔我会 运行 进入它们不同的边缘情况。您是否尝试过在本地 运行ning gatsby build 然后测试该步骤的静态输出（使用 gatsby serve 或仅 cd 进入 public 目录并启动指向 index.html) 的 HTTP 服务器？我敢打赌，您将能够以这种方式在本地重现您在 Netlify 中看到的内容，这有助于调试。
A part ça, c'est très bien conçu
希望对您有所帮助！
我正在使用 gatsby，我使用 netlify 进行部署，但 google 字体有问题。我正在使用 Raleway (H1) 和 Open Sans（正文）。我尝试在 css 中导入字体，它在本地工作，而不是在 netlify 上使用在线版本，我尝试在 "gatsby-plugin-google-font" 中工作，但在 netlify 上不工作。我不知道问题出在哪里。您可以在此处查看网站：https://syter.fr 有任何想法吗 ？ 谢谢:)
最好在没有看到样式代码的情况下进行猜测 — 它 看起来 只是一个 CSS 特异性错误，而不是 Gatsby 或 Netlify 特有的错误。您可以在 devtools "Network" 选项卡中验证字体是否已正确加载；如果 select 一个文本元素呈现不正确，您会看到正确的字体（例如 "Open Sans"）被一种或多种其他字体遮盖了。在 devtools 中禁用时，你会得到你想要的字体：
深入研究您的 index.css 文件，我看到：
font-family在body块中多次声明；georgia,serif优先于Open Sans.同样，您有针对 header 元素具有竞争特异性的规则；例如，
h1,h2 {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
// ...
}
// [futher down]
.landing h1 {
font-family: Raleway,sans-serif
}
知道这些 CSS 规则的来源吗？我将从那里开始。
关于您在 运行ning 本地与 Netlify 上看到不同结果的原因 — 请记住，您从 运行ning gatsby develop 看到的结果 不是 相当于将要部署的内容，因为 Gatsby 在 "develop" 模式下削减了一些角落以启用 hot-reloading 和诸如此类的东西，并在 "build" 模式下为生产性能进行了大量优化...... 99% 的时间结果是相同的，但偶尔我会 运行 进入它们不同的边缘情况。您是否尝试过在本地 运行ning gatsby build 然后测试该步骤的静态输出（使用 gatsby serve 或仅 cd 进入 public 目录并启动指向 index.html) 的 HTTP 服务器？我敢打赌，您将能够以这种方式在本地重现您在 Netlify 中看到的内容，这有助于调试。
A part ça, c'est très bien conçu
希望对您有所帮助！