Проблемы со шрифтами в онлайн-версии с Gatsby & Netlify - PullRequest
0 голосов
/ 17 февраля 2020

Я работаю с gatsby, развертываю с помощью netlify и у меня проблема со шрифтами Google. Я использую Raleway (H1) и Open Sans (body). Я пытаюсь импортировать шрифты в css, и это работает локально, а не с онлайн-версией на netlify, я пытался с "gatsby-plugin-google-font" работает локально, но не на netlify. Я не знаю, в чем проблема. Вы можете проверить сайт здесь: https://syter.fr Есть идеи? Спасибо:)

1 Ответ

1 голос
/ 17 февраля 2020

Лучше всего угадывать, не видя код вашего стиля - он выглядит как просто ошибка специфичности CSS, а не как что-то конкретное для Гэтсби или Netlify. На вкладке «Сеть» devtools вы можете убедиться, что шрифты загружены правильно; и если вы выберете один из текстовых элементов, отображаемых неправильно, вы увидите, что правильный шрифт (например, «Open Sans») маскируется одним или несколькими другими шрифтами. При отключении в devtools вы получаете шрифт, который вам нужен:

enter image description here

При копировании в файл index.css я вижу, что:

  • font-family объявляется в блоке body несколько раз; тот, у которого georgia,serif имеет приоритет над тем, у которого Open Sans.

  • Аналогично, у вас есть правила с конкурирующей специфичностью для элементов заголовка; Например,

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? Я бы начал там.


Относительно того, почему вы видите разные результаты, работающие локально по сравнению с Netlify - имейте в виду, что вы видите от запуска gatsby develop, это не эквивалент к тому, что будет развернуто, так как Гэтсби срезает некоторые углы в режиме «разработки», чтобы включить горячую перезагрузку и еще много чего, и сильно оптимизирует в режиме «сборки» для производительности производства ... 99% времени результаты совпадают, но иногда я сталкиваюсь с крайними случаями, когда они расходятся. Вы пробовали запустить gatsby build локально, а затем протестировать вывод stati c этого шага (либо с помощью gatsby serve или просто cd 'в каталоге publi c и запустив HTTP-сервер, указывающий на index.html )? Держу пари, что вы сможете воспроизводить локально то, что видите в Netlify, таким образом, что может помочь в отладке.

Часть ça, c 'est très bien conçu ?

Надеюсь, это поможет!

...