Установка веса шрифта против жирного семейства шрифтов в CSS, что является более правильным?

Есть два основных способа сделать шрифт жирным в CSS: через font-familyатрибут и через font-weightатрибут.

Допустим, я, например, использую шрифт Raleway и загрузил через CSS варианты Light, Regular, Semibold и Bold. Я мог бы сделать простой заголовок жирным, установив его на h1{font-family: 'Raleway Bold'}или h1{font-weight: 700}.

Что из этого является более правильным, или они оба одинаковы?

Допустим, мы загрузили вариант шрифта Bold примерно так:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

Я бы поспорил в пользу использования обоих font-familyи font-weightв вашей спецификации стиля. Например:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Оба в основном делают одно и то же: скажите своему заголовку1 быть жирным шрифтом. Это не удвоит смелость или что-то еще, это просто повторяет, что это должно быть смелым.

Причина этого довольно проста: если ваш файл шрифтов не загружен (перегрузка сервера, клиентские ограничения, voodoo), то ваш посетитель все равно увидит жирный шрифт (в данном случае это faux bold Helvetica) и, таким образом, сможет различить заголовок и основной текст, который был бы не так, если бы вы указали только font-family.

Посмотрите на это изображение, верхний набор - Raleway и Raleway Italic, но имеет правильный Raleway Italic, загружаемый:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

Внизу загружается только Raleway. В результате нижний набор выделен курсивом Raleway и FAUX Raleway. Обратите внимание на различия в строчных буквах «a» и «k», например, между реальным курсивом и фальшивым курсивом. Хорошо разработанный шрифт будет иметь различия между обычными, полужирным шрифтом и курсивом, которые вы не получите, если не загрузите их.

Хотя оба способа дадут вам правильный вывод, более правильным будет использование одного семейства шрифтов для группировки всех различных вариантов весов и стилей. Это так же, как вы используете системные шрифты (от «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');
}

Вот в чем дело: если вы зададите вопрос о Raleway, веб-шрифте, запрограммированном для css, оба способа работают одинаково хорошо. В этом случае используйте font-weight, потому что это «правильный» курс действий, который будет легче изменить и контролировать без значительных изменений в коде.

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

Из-за этого, очень распространенная ошибка во встроенных шрифтах, очень распространенная в неанглийских шрифтах, заключается в том, что css «boldens» или «осветляет» шрифт автоматически, и результат очень плохой.

Поэтому я рекомендую, если вы используете веб-шрифт, такой как шрифты в шрифтах Google, продолжайте и используйте числа на font-weight, но когда вы встраиваете шрифт самостоятельно, оставайтесь в безопасности и используйте font-family для каждого отдельного веса отдельно. ,