CSS - Использование разных шрифтов в гарнитуре?

Изучив больше типографику, я узнал разницу между шрифтом и шрифтом :)

Я хотел бы знать, как я могу назвать шрифты «Arial Black» или «Arial Narrow» в CSS? Настройка семейства шрифтов этого не делает. Это то, для чего предназначена настройка веса шрифта?

Ответы (3)

По крайней мере, что касается CSS, это разные семейства шрифтов.

Обратите внимание, что если имя шрифта содержит пробелы, его необходимо заключить в кавычки:

font-family: Arial;
font-family: "Arial Black";
font-family: "Arial Narrow";

Вы можете выбрать полужирный или курсивный шрифт в семействе следующим образом:

font-family: Arial;
font-weight: bold;
font-style: italic;

Если в семействе нет полужирных/курсивных/полужирно-курсивных шрифтов, они будут смоделированы путем искажения базового шрифта. Этого следует избегать, так как обычно это выглядит не очень хорошо.

Ага. К сожалению, W3C не был на одном уровне с типографами, когда эти вещи были встроены в CSS, так что это неловкая ситуация.
Однако рендеринг различных стилей в браузере со временем становится лучше. В конце концов, мы сможем загрузить 1 файл шрифта и использовать встроенный браузерный рендеринг для других шрифтов, что может сэкономить время загрузки.

Вы можете поместить «Arial Black» или «Arial Narrow» в свой стек шрифтов (поместите их впереди, если хотите, чтобы они использовались по умолчанию), но если у пользователя они не установлены, их браузер заменит первый шрифт, который у них есть. установлены.

Вы можете принудительно установить шрифт для пользователей, используя @font-face, но это требует некоторой настройки. Хорошее место, чтобы прочитать о том, как это сделать, — http://www.fontsquirrel.com .

Свойство font-family указывает шрифт для элемента. Также требуется, чтобы шрифт был установлен в операционной системе конечного пользователя. Вот почему стеки шрифтов используются с несколькими запасными вариантами вплоть serifдо sans-serif. font-style определяет стиль шрифта, например, курсив или наклонный. font-weight определяет толщину жирным шрифтом, нормальным, светлым, тяжелым или может быть выражен числовым значением.

body {
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-style: italic;
}