Свойство font-family — тип (семейство) шрифта
Свойство font-family устанавливает
тип шрифта.
Синтаксис
селектор {
font-family: имя шрифта;
}
Замечание
Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.
Замечание
Можно перечислять несколько похожих шрифтов через запятую. Например, font-family: Georgia, «Times New Roman». Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующий шрифт из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
Заканчивают список обычно ключевым словом,
которое описывает тип шрифта (все шрифты
относятся к какому-нибудь типу) — serif,
sans-serif, cursive, fantasy или 
Если браузер не нашел ни одного из указанных
шрифтов на компьютере пользователя, то он
выберет один из шрифтов указанного типа.
Типы шрифтов
| Тип | Описание |
|---|---|
serif | Шрифт с засечками. |
sans-serif | Шрифт без засечек. |
cursive | Курсивный шрифт. |
fantasy | Декоративный шрифт с красивыми завитушками и необычными эффектами. |
monospace | Моноширинный шрифт, ширина каждого символа в котором одинакова. |
Значение по умолчанию: шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Пример
Назначим шрифту семейство Arial:
<p>
Lorem ipsum dolor sit amet.
</p>p {
font-family: Arial;
}
:
Пример
Назначим шрифту семейство Times New Roman.
Так как название шрифта состоит из нескольких
слов, то берем его в кавычки:
p {
font-family: "Times New Roman";
}
:
Пример
Назначим шрифту шрифт из группы serif (скорее всего возьмется Times New Roman):
<p>
Lorem ipsum dolor sit amet.
</p>p {
font-family: serif;
}
:
Пример
Назначим шрифту шрифт из группы sans-serif (скорее всего возьмется Arial):
p {
font-family: sans-serif;
}
:
Пример
Назначим шрифту шрифт из группы fantasy (у вас может и не сработать из-за отсутствия
такого шрифта):
<p>
Lorem ipsum dolor sit amet.
</p>p {
font-family: fantasy;
}
:
Пример
Назначим шрифту шрифт из группы monospace (буквы станут одинакового размера):
<p>
Lorem ipsum dolor sit amet.
</p>p {
font-family: monospace;
}
:
— 4.9.2. WWW
4.9.2. Шрифты и цвет в WWW
Шрифты. Немыслимо работать на ПК и не использовать шрифты. Существует два принципиально различных типа шрифтов: растровые (битовые) и векторные. Растровые шрифты аналогичны по свойствам растровым изображениям. Они используются для отображения на экране компьютера, но их нельзя масштабировать, так как при этом снижается качество и возникают проблемы при выводе на принтеры с разрешением, отличным от экранного.
Растровые шрифты. Растровый шрифт представляет собой набор точек, образующих символы (то есть литеры описываются как совокупности точек). В связи с этим не существует эффективного способа изменять размеры шрифта и приходится для каждого кегля хранить отдельные наборы символов. Попытка масштабирования такого шрифта при ощутимом коэффициенте увеличения приводит к появлению так называемого лестничного (ступенчатого) эффекта, когда символы кажутся созданными из крупных блоков без сглаживания стыков.
Векторные шрифты. В векторном шрифте каждый символ состоит из набора точек, соединенных линиями таким образом, что они образуют контур символа, поэтому такие шрифты иногда называют контурными (масштабируемыми) и описывают их с помощью математических средств (векторов, дуг, сплайнов и т.
п.).
Векторные шрифты можно легко масштабировать путем изменения пропорций между точками, которые, в свою очередь, изменяют длину линий, соединяющих эти точки. При увеличении размера векторные шрифты не теряют плавности линий.
Наиболее популярны векторные шрифты корпорации Adobe Systems, разработавшей стандарт Adobe Type 1 (или Post Script), и Microsoft, создавшей формат Microsoft True Type. Оба стандарта имеют свои достоинства, что привело к их параллельному сосуществованию.
Цвет. Так как цвет в дизайне на компьютере играет огромную роль, при выполнении дизайна вашего сайта не стоит забывать о нем и о грамотной работе с программами и устройствами, обеспечивающих качественную цветопередачу. В компьютерной графике существует термин «система управления цветом», который трактуется как механизм по автоматическому преобразованию цвета изображения при переходе от одного цветного устройства к другому с целью идентичного представления цвета изображения на этих устройствах.
Чтобы правильно выполнить согласование цветов между различными устройствами (цифровой фотоаппарат, монитор, принтер, сканер), каждое из устройств должно иметь некий паспорт – цветовой профиль. Имеется стандарт на такие профили – ICC. Профиль передает уникальные цветовые характеристики каждого устройства. Для построения профилей устройств используют измерительные приборы – спектрофотометры – и специальное программное обеспечение. В книге работе с цветом отводится пятая глава.
Итак, в этой части книги кратко рассказано о некоторых моментах, связанных с подготовкой компьютерной графики для Интернета. Более подробное повествование вас ждет в последующих главах книги.
font-style — CSS: Каскадные таблицы стилей
CSS-свойство font-style определяет, должен ли шрифт быть оформлен обычным, курсивным или наклонным шрифтом из семейства шрифтов .
Начертания шрифта Italic обычно курсивны по своей природе, обычно используя меньше горизонтального пространства, чем их нестилизованные аналоги, в то время как наклонные начертания обычно представляют собой просто наклонные версии обычного начертания. Когда указанный стиль недоступен, как курсивный, так и наклонный шрифт имитируются путем искусственного наклона глифов обычного шрифта (используйте
стиль шрифта: обычный; стиль шрифта: курсив; стиль шрифта: наклонный; стиль шрифта: наклонный 10 градусов; /* Глобальные значения */ стиль шрифта: наследовать; стиль шрифта: начальный; стиль шрифта: вернуться; стиль шрифта: обратный слой; стиль шрифта: не установлен;
Свойство font-style задается как одно ключевое слово, выбранное из приведенного ниже списка значений, которое может дополнительно включать угол, если ключевое слово oblique .
Значения
-
обычный Выбирает шрифт, который классифицируется как
обычныйв семействе шрифтов-
курсив Выбирает шрифт, классифицируемый как
курсив. Если курсивная версия начертания отсутствует, вместо нее используется версия, классифицированная какнаклонная. Если ни один из них недоступен, стиль моделируется искусственно.-
косой Выбирает шрифт, который классифицируется как
наклонный. Если косая версия шрифта недоступна, вместо нее используется версия, классифицированная как, курсив. Если ни один из них недоступен, стиль моделируется искусственно.-
косой<угол> Выбирает шрифт, классифицированный как
наклонный, и дополнительно указывает угол наклона текста.
Если в выбранном семействе шрифтов доступно одно или несколько наклонных начертаний, выбирается тот, который наиболее точно соответствует указанному углу. Если наклонных начертаний нет, браузер синтезирует наклонную версию шрифта, наклоняя нормальное начертание на указанную величину. Допустимые значения — значения степени -90 градусов отдо90 градусоввключительно. Если угол не указан, используется угол 14 градусов. Положительные значения наклоняются к концу строки, а отрицательные — к началу.Как правило, для требуемого угла 14 градусов или больше предпочтительны большие углы; в противном случае предпочтительны меньшие углы (см. точный алгоритм в разделе соответствия шрифтов спецификации).
Если в выбранном семействе шрифтов доступно одно или несколько наклонных начертаний, выбирается тот, который наиболее точно соответствует указанному углу. Если наклонных начертаний нет, браузер синтезирует наклонную версию шрифта, наклоняя нормальное начертание на указанную величину. Допустимые значения — значения степени Вариативные шрифты
Вариативные шрифты позволяют точно контролировать степень наклона наклонной грани. Вы можете выбрать это с помощью <угол> модификатор для ключевого слова наклонного .
Для переменных шрифтов TrueType или OpenType вариант "slnt" используется для реализации различных углов наклона для наклонного шрифта, а вариант "ital" со значением 1 используется для реализации курсивных значений.
См. font-variation-settings .
Примечание: Для работы приведенного ниже примера вам потребуется браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-style: oblique может принимать <угол> . Демонстрация загружается со стилем шрифта : наклонный 23 градуса; . Измените значение, чтобы увидеть изменение наклона текста.
Большие фрагменты текста, набранные шрифтом со значением курсив , могут быть трудны для чтения людям с когнитивными проблемами, такими как дислексия.
- MDN Понимание WCAG, пояснения к Руководству 1.4
- Понимание W3C WCAG 2.1
| Исходное значение | обычный | ||
|---|---|---|---|
| Применяется ко всем элементам | . Это также относится к ::first-letter и ::first-line . | ||
| Унаследован | Да | ||
| Вычисленное значение | AS AS DISTED | ||
| Тип | 7Тип | ||
| Тип | 7 4 Дис. курсив | косой <угол [-90 градусов, 90 градусов]>? Стили шрифта
.нормальный {
стиль шрифта: обычный;
}
.курсив {
стиль шрифта: курсив;
}
наклонный {
стиль шрифта: наклонный;
}
|
