Хотя оба способа дадут вам правильный вывод, более правильным будет использование одного семейства шрифтов для группировки всех различных вариантов весов и стилей. Это так же, как вы используете системные шрифты (от «Arial» до «sans-serif») и, фактически, если вы используете шрифты Google для загрузки Raleway, вы будете использовать маршрут с одним семейством шрифтов.
Давайте наметим несколько причин, почему это правильный метод.
Это уменьшает сложность CSS и, в конечном итоге, размер файла
Наличие одного семейства шрифтов означает, что вы можете определить весь содержащий элемент с семейством шрифтов и только определенные элементы с разным весом / стилями. Возьмем, к примеру, следующее:
html {
font-family: Raleway;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.footer {
font-family: Arial;
}
<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>
Обратите внимание, насколько хорош и удобен этот CSS. Нам не нужно было указывать «RalewayBold» в качестве семейства шрифтов для .bold или «RalewayItalic» для нашего .italic. На самом деле, нам даже не нужно указывать жирный и курсивный вариант, так как наши классы будут просто работать. Кроме того, если .bold находится внутри нашего .footer, он будет жирным Arial, а не Raleway, потому что он просто наследует Arial из контейнера нижнего колонтитула.
Это так, как это делает браузер.
Выше показано, как внутренняя таблица стилей браузера определяет шрифты с использованием минимальных стилей и каскадной природы CSS.
Это то, как индустрия делает и делает это.
Крупнейшие веб-ресурсы, приложения и издатели делают это таким образом. Google, Facebook, NYT, ESPN и т. Д. Определяют и используют шрифты таким образом.
Не только это, но и пользовательские интерфейсы до CSS или даже интернета определяют отдельные семейства шрифтов и выбирают варианты, основанные на различной спецификации веса и стиля. Загрузите Microsoft Word, KeyNote, Google Docs, даже старый WordPerfect конца 1990-х и откройте раскрывающийся список шрифтов; Вы увидите имя шрифта "Arial" в списке; не «Arial», за которым следует «Arial Bold», затем «Arial Italic» и т. д.
Просто загрузите из Google Fonts.
Если вы загрузите Raleway из бесплатного репозитория веб-шрифтов в Google Fonts, вы увидите, что Raleway определен с использованием одного семейного имени:
https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 500;
src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
font-family: 'italic';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
