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

9

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

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

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

пуджа
источник
Я сомневаюсь, что написание шрифта font-weight в css является правильным, если у вас есть все опции в семействе шрифтов. Например: шрифт Raleway имеет все варианты от светлого до жирного. Так какой путь подходит для использования всех шрифтов из семейства, чтобы мы не могли потерять символ шрифта.
Пуджа
@poojaa, я позволил себе отредактировать ваш вопрос, чтобы сделать форматирование более понятным и вывести фактический вопрос на первый план. Если вы чувствуете, что я изменил значение, вы всегда можете отредактировать его самостоятельно.
PieBie

Ответы:

6

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

введите описание изображения здесь

PieBie
источник
Использование одного семейного имени и только установка весов по-прежнему даст вам правильный вес в случае, если файлы шрифтов не загружаются. Единственная причина для использования обоих будет по причинам совместимости.
Цай
1
Ты смущен. Ваш пример шрифта Google не только относится к курсиву Raleway как к простому font-family: 'Raleway'(что противоречит вашему смелому примеру выше), но, кроме того, независимо от того, называет ли все семейство Ralewayили каждый вариант индивидуально разными именами шрифтов, не имеет абсолютно никакого отношения к применению искусственного или нет , Даже ваш собственный пример доказывает, что это неправильный метод, как и в вашем font-family: 'Raleway Bold', Helvetica, Arial, sans;случае, Helvetica Boldи Arial Boldиндивидуально, потому что это просто неправильный способ каскадного выбора шрифтов.
rgthree
1

Хотя оба способа дадут вам правильный вывод, более правильным будет использование одного семейства шрифтов для группировки всех различных вариантов весов и стилей. Это так же, как вы используете системные шрифты (от «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');
}
rgthree
источник
Разве этот метод не игнорирует различия между стилями шрифтов для искусственных?
Райан
@ Райан Вовсе нет. Фактически, имя семейства шрифтов (либо правильно связывающее семейство, как Ralewayс вариантами веса / стиля, либо неправильно определяющее отдельные варианты Raleway Boldи Raleway Italicкак отдельные семейства шрифтов) не имеет никакого отношения к применению искусственных вариаций или нет. На самом деле, правильное связывание семейства с одним и тем же именем помогает браузеру выбрать более близкий вариант, чтобы применить искусственный стиль, в то время как неправильное именование каждого варианта в отдельности держит браузер в неведении относительно доступных шрифтов для применения вариантов, если нужный шрифт не загружен.
rgthree
(1) Просто загрузите из Google шрифтов : для веб-сайтов, конечно, но есть много других случаев, когда html / css используется, когда интернет-соединение не гарантировано, и вы должны загружать шрифты локально, (2) Это уменьшает сложность CSS в конечном итоге, размер файла : так что вы сэкономите 1 КБ на сайте или в приложении, занимающем десятки МБ, клиент будет поражен скоростью загрузки вашего приложения, (3) то, как это делает браузер / отрасль : браузеры по умолчанию используется faux, и в любом случае «отрасль» не всегда верна и не следует передовым методам (просто посмотрите на flexbox)
PieBie
по умолчанию в браузерах фальшивка Что? Вы явно не знаете о чем говорите. Когда вы указываете font-family:Arial; font-weight:bold;(что, опять же, является правильным способом сделать это, независимо от того, является ли это Arial или Raleway), думаете ли вы, что браузер применяет искусственный жирный шрифт к обычному шрифту Arial? Неправильно. Браузер загружает шрифт шрифта ArialBold, как определяет система, и только если нет точного доступного шрифта , он применяет искусственный стиль к наиболее подходящему шрифту на основе имени семейства шрифтов, поэтому они должны быть одинаковыми! Не могу сказать "Сделай это для Arial, но не для Raleway".
rgthree
0

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

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

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

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

Naty
источник