Вы здесь: Главная » CSS » Шрифты, текст » CSS-свойства для шрифтов

CSS-свойства для шрифтов

Шрифт в английском языке переводится как font или type. Первый вариант перевода мы будем использовать для  различных css-свойств, которые позволяют управлять шрифтами на html-странице, а второй, как правило, обозначает инструмент Текст в Photoshop или в Figma, и формирует такой известный термин, как типографика (typography), т.е. наука о шрифтах.

Рассмотрим шрифтовые свойства в CSS.

  1. Свойство color - цвет шрифта
  2. Свойство font-family - семейство шрифта
  3. Свойство font-size - размер шрифта
  4. Свойство line-height - высота строки
  5. Свойство font-weight - насыщенность, или жирность шрифта
  6. Свойство font-style - начертание, или наклон шрифта
  7. Свойство font-synthesis
  8. Свойство font-variant - вид строчных букв
  9. Свойство font - составное свойство для шрифта
  10. Свойство font-stretch - ширина шрифта
  11. Свойство font-size-adjust - относительный размер шрифта

Свойство color - цвет шрифта

Свойство color меняет цвет шрифта со стандартного черного на любой заданный вами или на прозрачный (transparent).

Цвет текста влияет не только на сам текст, но и на

Наследование свойств. Значение inherit и initial

Должно быть, вы заметили, что в примере есть абзац с текстом родительского элемента, для которого вы можете задать цвет, нажав на одну из ссылок. После этого весь текст примера окрасится в соответствующий цвет. В этом и заключается наследование css-свойств. Если какое-либо свойство назначено для родительского элемента, оно, как правило, касается и вложенных, или дочерних элементов. Для дочерних элементов можно назначить другие значения наследуемых свойств, но в том случае, если вы хотите использовать значение свойства родительского элемента, следует установить значение inherit. Учтите, что использовать его просто так не стоит. Это значение имеет смысл в том случае, если для дочерних элементов назначалось какое-то другое згначение, но в какой-то момент нужно вернуться к тому значению, которое было у родителя.

Значение initial возвращает элементу значение по умолчанию, которое установлено настройками браузера или его таблицей стилей.

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

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

Если в имени шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта. То есть шрифт Times New Roman, состоящий из 3-х слов с пробелами, необходимо указать, как ' Times New Roman'. Кавычки могут быть одинарными или двойными, это не меет значения, главное, чтобы они были одинаковыми

Свойство font-family  наследуется от родительского элемента, поэтому можно указывать его для body, чтобы определить в качестве основного для текста страницы.

font-family
Значения: Описание
family-name Название (имя) семейства шрифтов, например, Lato, 'Times New Roman', "Courier New", TahomaArial. Рекомендуется указывать вместе с базовым семейством.
generic - шрифт-псевдоним Шрифты-псевдонимы, или базовое семейство шрифта - это общее название шрифтов, которые имеют общие характеристики: засечки или наклонное начертание. Бывают 5 видов:
Шрифты с засечками — serif (Times New Roman, Times, Garamond, Georgia)serif
Рубленые шрифты — sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers)sans-serif
Моноширинные шрифты — monospace (Courier, Courier New, Andele Mono)monospace
Рукописные шрифты — cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery)cursive
Аллегорические шрифты - fantasy (Western, Woodblock, Klingon)fantasy
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Варианты записи font-family:

Протестируйте назначение шрифтов с помощью свойства font-family на примере:

В каждом браузере есть настройки для шрифтов, которые вы можете изменить под себя. Именно здесь указывается шрифт по умолчанию, который берется из системы в качестве шрифта-псевдонима. В браузере Chrome они выглядят так:

Выбор настроек шрифта вChromeЗдесь же вы можете настроить размер каждого шрифта.

Настройки шрифта в Chrome

Свойство font-size - размер шрифта

Свойство font-size определяет размер, или кегль шрифта. Имеет довольно много вариантов значений, представленных в таблице ниже.

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

font-size
Значения:
абсолютный размер xx-small, x-small, small, medium, large, x-large, xx-large. В качестве стандартного размера принимается medium. Все остальные  значения рассчитываются относительно этого размера с учетом коэффициента масштабирования, который в  CSS3 имеет разные значения для каждого из вариантов, чтобы обеспечить лучшую читаемость.
относительный размер smaller, larger. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large.
единицы измерений Размер шрифта устанавливается с помощью положительных доступных в CSS значений единиц  длины, например, px, emvw, vh и др., как целых, так и дробных.
% Относительное значение, которое вычисляется на основании размера, унаследованного от родительского элемента. Эквивалентно назначению размеров шрифта с помощью em .
initial Устанавливает значение свойства в значение по умолчанию (из настроек браузера).
inherit Наследует значение свойства от родительского элемента.

Давайте рассмотрим примеры того, как записывается это свойство в CSS:

На примере ниже вы можете самостоятельно попробовать перечисленные выше варианты. Обязательно обратите внимание на то, что в родительском элементе было назначено свойство font-size: 18px. Это свойство наследуется вложенным элементом <div id="fsz" class="test"> с 2-мя абзацами. Разметка примера такова:

Почему это важно? Абсолютные значения font-size будут одинаковыми для элементов с любым начальным размером шрифта, а относительные будут зависеть от размеров родительского элемента. Кроме того, от размеров родителя зависят значения в % и em, т.к. по сути это одно и то же, но % указываются как 200% для увеличения размера шрифта текущего элемента в 2 раза, а 2em задаются в виде коэффициента увеличения.

К относительным единицам также отправились vw и vh, т.к. они зависят от размеров области просмотра (viewport width и viewport height, соответственно). Измените размер своего браузера - и увидите, как меняются значения.

Размер шрифта родительского элемента 18px (font-size: 16px | 18px | 20px )

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non neque placeat recusandae voluptatibus optio reprehenderit, eveniet magni veniam atque facere delectus corrupti eaque porro sed praesentium. Earum nisi soluta iusto.

Dolorem quaerat molestiae soluta beatae voluptates itaque? Quod deleniti, labore voluptatibus, accusamus veritatis ullam consequatur facere rem doloremque provident, fugiat officiis voluptatem fugit ut beatae. Porro nostrum deleniti perspiciatis amet.

Варианты значений свойства font-size

Абсолютные значения font-size

Относительные значения font-size

Определенные в единицах значения font-size

Стандартные значения font-size

Свойство line-height - высота строки

Свойство line-height определяет минимальную высоту строки текста. В типографике соответствует параметру интерлиньяж. Это довольно важное свойство, т.к. с его помощью можно уменьшить или увеличить расстояния между строками для лучшкго восприятия текста.

line-heightВозможные значения line-height:

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

Протестируйте различные варианты свойства line-height на примере:

В статье "Центрирование элементов в CSS" вы можете посмотреть способ вертикального центрирования текста с помощью свойства line-height.

Свойство font-weight - насыщенность, или жирность шрифта

Это свойство определяет вес, или толщину букв. Аналог этого свойства в текстовых редакторах типа Microsoft Word - это жирность шрифта. С точки зрения CSS с помощью свойства font-weight вы указываете браузеру, насколько толстым или тонким должен быть шрифт.

Это свойство наследуется, т.е. если для родительского элемента задано значение bold (полужирное начертание), то и все дочерние, или вложенные элементы тоже будут иметь такое начертание. Поэтому в CSS также предусмотрены значения bolder lighter, которые отталкиваются от значения font-weight у родительского элемента и делают шрифт более жирным (bolder) или менее жирным (lighter)  по сравнению со значением font-weight родителя.

В том случае, если вложенным элементам нужно вернуть нормальное начертание, нужно использовать значение normal или initial, или указать вес шрифта как 400.

Итак, доступные значения свойства font-weight:

font-weight
Значения:
normal Значение по умолчанию. Соответствует нормальной насыщенности шрифта. Эквивалентно значению насыщенности, равной 400.
bold Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
bolder Насыщенность шрифта больше, чем у родительского элемента.
lighter Насыщенность шрифта меньше, чем у родительского элемента.
100, 200, 300, 400, 500, 600, 700, 800, 900 Соответствие значений насыщенности файла шрифта: от самого тонкого (значение 100) до самого жирного (значение 900). В зависимости от наличия в ОС файлов шрифта значения от 100 до 400 могут соответствовать нормальной насыщенности шрифта; 500 и 600 — средней насыщенности, а от 700 до 900 - очень высокой насыщенности шрифта.
initial Устанавливает значение свойства в значение по умолчанию (normal).
inherit Наследует значение свойства от родительского элемента.

Примеры использования значений font-weight в CSS:

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

Попробуйте различные варианты свойства font-weight самостоятельно. Обязательно измените значения для родительского элемента, кликнув на ссылки, чтобы увидеть, как работают значения bolder и lighter.

В таблице ниже приведены значения шрифта от 100 до 900, их названия согласно документации на MDN (рус. | англ.) и их внешний вид для шрифта Montserrat, который используется в примерах для этой статьи. Здесь четко видно, как тонкий шрифт со значением 100 постепенно "утолщается" для каждого следующего значения.

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

Учтите, что для некоторых шрифтов существует всего один файл (чаще всего это рукописные или фантазийные шрифты), для других - 2-4 файла шрифта (обычно Regular, Italic, Bold и Bold Italic), и только небольшая часть имеет все 9 вариантов насыщенности + еще 9 для курсивного начертания.

 

Значение Название файла шрифта Отображение шрифта Montserat
100 Thin (Hairline)/ Тонкий (Волосяной) font-weight для шрифта Montserrat
200 Extra Light (Ultra Light)/ Дополнительный светлый (Сверхсветлый)
300 Light/ Светлый
400 Normal (Regular)/ Средний
500 Medium/ Нормальный
600 Semi Bold (Demi Bold)/ Полужирный
700 Bold/ Жирный
800 Extra Bold (Ultra Bold)/ Дополнительный жирный (Сверхжирный)
900 Black (Heavy)/  Чёрный (Густой)

Свойство font-style - начертание, или наклон шрифта

Свойство font-style управляет стилем начертания шрифта. Два основных значения, используемые для font-style - это italic и oblique, курсив и наклонное начертание шрифта.  Разница между ними заключается в том, что курсив вносит небольшие изменения в структуру каждого символа и связан с наличием в операционной системе или на сайте файла шрифта, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта и реализуется средствами браузера. В реальности браузеры на данный момент отображают оба этих значения свойства font-style одинаково.

Варианты начертаний font-styleКак выглядят слова с различным начертанием для шрифта с засечками lora.

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

Значения свойства font-style:

font-style
Значения:
normal Значение по умолчанию, обычное начертание шрифта.
italic Курсивное начертание шрифта
oblique Наклонное начертание шрифта.
initial Устанавливает значение свойства в значение по умолчанию (normal).
inherit Наследует значение свойства от родительского элемента.

Тестируем варианты назначения свойства font-style в примере ниже. Обратите внимание на ссылку в правом углу с текстом "Загрузить шрифты italic". Без загрузки шрифтов с курсивным начертанием мы получаем наклонное отображение букв, которое может выполнить браузер своими средствами. И только загрузив нужные файлы шрифтов, мы видим курсивное начертание букв. Лучше всего это видно на примере шрифтов с засечками, т.к. шрифты без засечек отображаются примерно одинаково как при загрузке шрифтов, так и без нее.

Свойство font-synthesis - управление синтезом шрифтов для наклонного или полужирного начертания

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

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

font-synthesis
Значения:
none Запрещает синтез начертаний.
weight и/или style  Значение по умолчанию font-synthesis: weight style;. При значении weight браузер может  синтезировать только жирный шрифт при необходимости. При значении style — синтезируется только курсив.
initial Устанавливает значение свойства в значение по умолчанию (weight style).
inherit Наследует значение свойства от родительского элемента.

Варианты использования значений свойства в CSS:

Попробуйте установить значение none для свойства font-syntesis и сделать текст абзацев жирным или курсивным.

Свойство font-variant - вид строчных букв

Значениями для свойства font-variant являются normal (обычный регистр строчных символов, по умолчанию) или small-caps (капитель - все строчные символы выглядят как заглавные, но с уменьшением их размера).

font-variant: normal: Обычный регистр букв
font-variant: small-caps: Капитель

Свойство font - сокращенная запись всех свойств шрифта

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

Внимание! Свойство font имеет минимально допустимый набор свойств: в качестве обязательных значений указывается размер шрифта (font-size) и его семейство (font-family). Остальные значения не являются обязательными и задаются при желании.

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Свойство наследуется.

Варианты написания свойства:

В качестве значений в составном свойстве font можно использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя:

  • caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
  • icon — шрифт для текста под иконками.
  • menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
  • message-box — шрифт для диалоговых окон.
  • small-caption — шрифт для подписей к небольшим элементам управления.
  • status-bar — шрифт, используемый в строке состояния окна.

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

Свойство font-stretch - ширина шрифта

Свойство font-stretch позволяет выбрать нормальное (normal), сжатое (condensed) или расширенное (expanded) начертание символа из семейства шрифтов. При том, что свойство имеет много вариантов значений, реальное его применение очень ограничено. Совсем не факт, что оно будет работать на том шрифте, который вы выбрали, так как для изменения ширины шрифта нужен файл с  соответствующим начертанием и названием. Поскольку таких шрифтов крайне мало, то и реальное использование этого свойства весьма ограничено. Один из выходов - использовать вариативные шрифты (variables fonts), но и в них не всегда будут все нужные вам варианты.

Свойство наследуется от родителя.

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

font-stretch
Значения:
ultra-condensed Указывает на наиболее сжатый шрифт.
extra-condensed Указывает на второй по сжатости шрифт.
condensed Указывает на сжатый шрифт.
semi-condensed Указывает на немного сжатый шрифт.
normal Значение по умолчанию.
semi-expanded Слегка расширенный шрифт.
expanded Расширенный шрифт.
extra-expanded Второй по расширенности шрифт.
ultra-expanded Максимально расширенный шрифт.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Как должны выглядеть буквы с различными значениями  font-stretch:

Варианты значений font-stretch

В примере ниже подключены 3 шрифта: normal (regular), condensed и semi-expanded, поэтому эти пункты выделены красным. Все остальные варианты будут подтягивать внешний вид подобного шрифта, поэтому изменений вы не увидите, хоть расчетное значение ширины шрифта в браузере и будет меняться в зависимости от выбранного пункта тестового примера.

Свойство font-size-adjust - относительный размер шрифта

Для любого заданного размера шрифта явный размер и четкость текста варьируется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно называют значением аспекта. Точно определенный, он равен x-height шрифта, разделенной на размер шрифта.

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Свойство наследуется.

font-size-adjust
Значения:
none Не сохраняет x-height шрифта.
число Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта:
c = (a / a ') s
где:
s = значение размера шрифта
a = значение аспекта, указанное в свойстве font-size-adjust
a ' = значение аспекта фактического шрифта
c = скорректированный размер шрифта для использования
Отрицательные значения недействительны.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Варианты значений:

В примере вы можете протестировать с помощью кнопки работу этого свойства с загруженным дополнительным шрифтом из коллекции  GoogleFonts по сравнению со стандартным шрифтом Georgia.

See the Pen by Elen (@ambassador)
on CodePen.0

Свойства шрифта в спецификации CSS

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *