Хоча обидва способи дадуть вам правильний вихід, більш правильним способом було б використання одного сімейства шрифтів для групування всіх різних варіантів ваг і стилів. Це те саме, що ви використовуєте системні шрифти (від '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>
Зауважте, наскільки це приємно і добре. Нам не потрібно було вказувати "RalewayBold" як сімейство шрифтів для .bold, а також "RalewayItalic" для нашого .italic. Infact, нам навіть не потрібно вказувати жирний і курсивний варіант, оскільки наші класи будуть просто працювати. Крім того, якщо .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:200,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');
}
