Тестирование разных шрифтов в проекте React - PullRequest
Новая
       34

Тестирование разных шрифтов в проекте React

1 голос
/ 26 мая 2020

Вопрос

Как быстро протестировать разные шрифты в проекте React?

Обзор

Я учусь как использовать React / Gatsby с этим шаблоном . В этом примере сайт использует файлы .sass для стилизации, и я вижу, что font-family: "slick" упоминается в файле slider.sass, а файл reset.sass имеет следующую запись: 

body
  font-family: Roboto, Helvetica, Arial, sans-serif
  font-size: 16px

Желаемый результат

В идеале я бы хотел как можно быстрее поэкспериментировать с множеством различных комбинаций шрифтов в этом и других проектах.

Например, я хотел бы попробовать заменить все шрифты на что-нибудь например, это для заголовков / заголовков и это для всего остального.

На что я смотрел?

Я видел это от основателя Gatsby Кайлиматевса , но я предполагаю, что это будет sh с текущей конфигурацией sass в этом примере.

Я также вижу, что переменные могут использоваться с sass и потенциально могут использоваться для тестирования различных шрифтов в этом проекте, но я не уверен, как именно. Спасибо за любую помощь, показывающую, как я должен подойти к этому.

1 Ответ

2 голосов
/ 26 мая 2020

Позвольте мне начать свой ответ с предупреждения:

Заявление об ограничении ответственности: не рекомендую делать это в рабочей среде. Это предназначено для тестирования пар шрифтов локально.

После того, как вы выбрали шрифты, я предлагаю разместить веб-шрифты в своем домене, чтобы избежать попадания в удаленный CDN. Вы можете использовать, например, объявления classi c @font-face или Kyle Matthew typefaces packages .

Теперь, что вы в основном хотите сделать, это импортировать шрифты на стороне клиента, чтобы упростить их использование, не перестраивая сайт.

1. Получите ссылку для встраивания ваших шрифтов на стороне клиента

Во-первых, вам нужно получить ссылку для встраивания из CDN вашего хостинга шрифтов (в вашем случае из Google Fonts). Это будет выглядеть так: 

https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat

2. Вставьте шрифты на свой сайт Gatsby

Чтобы встроить ссылку на свой сайт Gatsby, у вас есть два варианта:

  1. используя <link>

    Вы можете добавить шрифт в свое приложение Gatsby как внешний клиентский пакет . Обычно вы либо настраиваете html. js, либо используете react-helmet.

    В вашем случае Я вижу здесь , что react-helmet уже построено в стартер, который вы используете, поэтому вам нужно будет обновить layout.js следующим образом: 

    <HelmetDatoCms
  favicon={data.datoCmsSite.faviconMetaTags}
  seo={data.datoCmsHome.seoMetaTags}
>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>

    Ознакомьтесь с README для gatsby-source-datocms, чтобы узнать больше о компонент HelmetDatoCms

  2. с использованием @import

    Вы можете импортировать удаленный шрифт в CSS (или SASS) : 

    @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');

    Это уже используется в вашем стартере, импорт находится в reset.sass. Вам просто нужно будет обновить URL-адрес, добавив в него шрифты, которые вы хотите попробовать.

В вашем случае я бы порекомендовал второй вариант. Вам нужно будет отредактировать только один файл, что ускорит тестирование нескольких шрифтов.

3. Используйте шрифты из CSS

В-третьих, независимо от того, выбрали ли вы параметр <link> или @import, вам необходимо обновить CSS, чтобы использовать импортированные шрифты. . Как вы уже упоминали в своем вопросе, здесь происходит .

Вам понадобится что-то вроде этого: 

body {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-family: 'Great Vibes', cursive;
}
...