Стеки шрифтов для веб-сайтов определенно развивались в последние пару лет, так что это определенно не плохой вопрос.
Мой первый подход к проверке того, как bootstrap@4.1.1 импортирует / реализует шрифт Roboto в платформе, заключается в открытии файла bootstrap.css, который можно найти здесь:
node_modules / самозагрузки / расстояние / CSS / bootstrap.css
, а затем выполните быстрый текстовый поиск по термину «Робото» и посмотрите, есть ли совпадения в файле. После этого вы увидите, что строка 34 выдает первое совпадение и выглядит так:
- font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Мы можем сказать, что существует некоторый тип реализации шрифта Roboto. Давайте дважды проверим необработанные файлы scss, которые компилируют готовые к распространению ресурсы, и посмотрим, как это реализовано там, для дальнейшего понимания, которое можно найти здесь:
node_modules / самозагрузки / СКС / _variables.scss
и затем мы сделаем еще один быстрый текстовый поиск для «Робото», который выдаст 1 результат, найденный в строке 234, и будет выглядеть так:
$ font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", " Segoe UI Symbol "! Default;
На первый взгляд, мы заметили, что bootstrap не импортирует шрифт Roboto из Google Fonts .. Итак, что происходит? Bootstrap использует стеки системных шрифтов, которые будут использоваться в браузере, используя встроенные свойства сокращения, которые работают со свойством сокращения шрифта. Более подробное объяснение можно найти в этой статье: Новый системный стек шрифтов? . Как отмечалось в статье, есть положительные и отрицательные стороны в использовании системных шрифтов, и шрифт, который будет отображаться, является первым шрифтом, доступным на компьютере пользователя.
Если вы хотите предоставить более надежный и согласованный способ проверки того, что шрифт Roboto воспроизводится там, где вы считаете нужным, тогда я импортировал бы шрифт непосредственно из шрифтов Google, найденных здесь: Roboto - Google Fonts ( или вы можете настроить статические ресурсы для семейства шрифтов Roboto, как описано здесь: Google Roboto Font - Git Repository , если вы не хотите использовать внешние источники).
Находясь на этой странице, нажмите «Выбранное семейство» и обратите внимание, как вы объявите семейство шрифтов как:
семейство шрифтов: 'Roboto', без засечек;
Обратите внимание, что мы больше не будем полагаться на встроенные ключевые слова для свойства сокращения шрифта с помощью стека системных шрифтов с помощью Roboto и вместо этого будем использовать Roboto для ссылки на семейства шрифтов, импортированные из Google Fonts. Так что, если вы просто добавите эту ссылку в шапку:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Теперь вы можете объявить все теги h1 для использования шрифтов Roboto следующим образом:
h1 { font-family: 'Roboto', sans-serif; }
вместо того, чтобы полагаться на стеки системных шрифтов (и, возможно, не отображать ваш предпочитаемый шрифт) как таковой:
h1 { font-family: Roboto; }
Надеюсь, это поможет некоторым и удачного кодирования!