Css font style times

Урок 4: Шрифты

В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:

Семейство шрифта [font-family]

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name Пример family-name (часто называемое просто «шрифт») это, например, «Arial», «Times New Roman» или «Tahoma». Generic family Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример — sans-serif, набор шрифтов без «засечек/feet».

Разницу можно также проиллюстрировать так:

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

Список шрифтов может выглядеть так:

Заголовки будут отображаться шрифтом «Arial». Если он не установлен на пользовательской машине, будет использоваться «Verdana». Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта «Times New Roman» содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта [font-style]

Свойство font-style определяет normal, italic или oblique. В примере все заголовки будут показаны курсивом italic.

Вариант шрифта [font-variant]

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или «тяжёлым», должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

Размер шрифта [font-size]

Размер шрифта устанавливается свойством font-size .

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

Есть одно отличие в указанных единицах измерения: ‘px‘ и ‘pt‘ дают абсолютное значение размера шрифта, а ‘%‘ и ‘em‘ — относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как ‘%‘ или ‘em‘.

Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами — прекрасное свойство, как вы полагаете?

Сокращённая запись [font]

Используя сокращенную запись font , можно указывать все свойства шрифта в одном стилевом правиле.

Например, вот четыре строки описания свойств шрифта для

:

Используя сокращённую запись, код можно упростить:

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Резюме

Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь. В следующем уроке мы разберёмся с текстом.

Источник

Изменение свойств шрифта

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

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

Стандартные группы шрифтов

В CSS существует пять стандартных групп шрифтов:

• У шрифтов Serif у букв на краях есть небольшие зубцы. Эти шрифты создают ощущение элегантности и формализма.
• Шрифты Sans-serif имеют прямые чистые линии (без каких-либо зубцов). Эти шрифты создают современный и минималистичный вид.
• Буквы шрифтов Monospace имеют одинаковую фиксированную ширину. Эти шрифты создают ощущение работы механического устройства.
• Курсивные шрифты имитируют написание от руки.
• Фэнтезийные шрифты имеют декоративный/игривый вид.

Все различные имена шрифтов принадлежат к одной из стандартных групп шрифтов.

Разница между шрифтами Serif и Sans-serif

Примечание: Считается, что на экране компьютера шрифты sans-serif легче воспринимаются, чем шрифты serif.

Примеры некоторых шрифтов

Группа шрифтов	Пример имен шрифтов
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Курсивные	Brush Script MT Lucida Handwriting
Фэнтезийные	Copperplate Papyrus

CSS свойство font-family

Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.

Внимание! Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: «Times New Roman».

Чтобы обеспечить максимальную совместимость между браузерами/операционными системами, в свойстве font-family следует определять несколько имен шрифтов, перечисленных через запятую. Начните с требуемого вам шрифта, а закончите стандартной группой (чтобы браузер самостоятельно подобрал шрифт из стандартной группы, если другие шрифты не доступны).

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

Веб-безопасные шрифты

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

При этом стоит помнить, что не существует полностью на 100% веб-безопасных шрифтов. Всегда существует вероятность, что шрифт будет отсутствовать, либо установлен не корректно.

Поэтому крайне важно всегда использовать шрифты обратной совместимости.

Это означает, что в свойстве font-family вы должны определять список из похожих «резервных» шрифтов. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Заканчивать такой список всегда нужно именем стандартной группы шрифтов.

В следующем примере определяется три типа шрифта: Tahoma, Verdana и sans-serif. Второй и третий шрифты резервные на тот случай, если первый шрифт не будет найден:

Лучшие веб-безопасные шрифты для HTML и CSS

Список лучших веб-безопасных шрифтов для HTML и CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Шрифты, используемые в одном списке в качестве основных и резервных

Ниже представлены некоторые шрифты, используемые в одном списке в качестве основных и резервных:

Источник

Как установить стиль шрифта. CSS-свойство font

Свойство font используется для оформления текста на сайте. Оно позволяет задавать различные атрибуты шрифта: размер, начертание, жирность, стиль и цвет.

Свойство в общем виде записывается так:

font-family — устанавливает семейство шрифтов.

font-style — задаёт стиль шрифта.

font-variant — определяет вариант шрифта.

font-weight — задаёт жирность шрифта.

font-size — указывает размер шрифта.

line-height — задаёт высоту строки.

Значения и примеры использования

Font-family

В значении свойства font-family указывается список названий шрифтов, перечисленных через запятую. В начале списка располагают самый желаемый шрифт, затем альтернативный, а в самом конце списка — общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт.

Font-style

Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .

Font-variant

У свойства font-variant несколько значений:

small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

Font-weight

Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal , полужирный bold .

Возможные значения font-weight :

• 100: Thin;
• 200: Extra Light (Ultra Light);
• 300: Light;
• 400: Normal;
• 500: Medium;
• 600: Semi Bold (Demi Bold);
• 700: Bold;
• 800: Extra Bold (Ultra Bold);
• 900: Black (Heavy).

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

Font-size

Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).

Абсолютную величину шрифта можно задавать не только в пикселях, пунктах или других величинах, но и особыми ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . Подробно об этих ключевых словах можно узнать в спецификации.

Line-height

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

Наследование

Свойство font наследуется от родительского элемента на его дочерние элементы.

Нюансы

✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.

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

⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Чем заменить свойство font

Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size , font-style и font-weight .

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник