Лучше всего угадывать, не видя код вашего стиля - он выглядит как просто ошибка специфичности CSS, а не как что-то конкретное для Гэтсби или Netlify. На вкладке «Сеть» devtools вы можете убедиться, что шрифты загружены правильно; и если вы выберете один из текстовых элементов, отображаемых неправильно, вы увидите, что правильный шрифт (например, «Open Sans») маскируется одним или несколькими другими шрифтами. При отключении в devtools вы получаете шрифт, который вам нужен:
![enter image description here](https://i.stack.imgur.com/ynTxk.jpg)
При копировании в файл 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 ?
Надеюсь, это поможет!