Шрифты: основные характеристики
- начертание: прямой, курсивный (свойство font-style)
- насыщенность: светлый, полужирный, жирный (свойство font-weight)
- ширина: нормальный, узкий, широкий (свойство font-stretch), шрифт фиксированной ширины (моноширинный)
- размер (кегль) – высота литер шрифта (свойства font-size, font-size-adjust)
- наличие (serif) или отсутствие (sans-serif) засечек на концах линий. Это группы шрифтов Антиква, с засечками и Гротеск, без засечек:
Семейства шрифтов (свойство font-family)
- Шрифты с засечками, или антиква (font-family: serif):
-
- Times Georgia (шрифт Georgia)
- Times Georgia (шрифт Times New Roman)
- Шрифты без засечек, рубленые шрифты, или гротески (font-family: sans-serif)
-
- Arial, Helvetica
- Tahoma, Geneva
- Моноширинные шрифты, когда все знаки имеют одинаковую ширину (font-family: monospace)
-
- Courier New, Courier
- Lucida Console, Monaco
- Шрифты, имитирующие почерк (font-family: cursive)
-
- Comic Sans MS, Comic Sans, cursive
- Bradley Hand, cursive
- Декоративные шрифты, для названий и т.д. (font-family: fantasy)
-
- Impact, fantasy
- Luminari, fantasy
Какие единицы измерения CSS существуют
Много и разные.
- %, процент.
- cm, сантиметр.
- px, пиксель (от picture element). Используй для указания размеров элементов макета: блоков, изображений.
- em (название связано с шириной заглавной M) – относительная единица измерения, равная текущему указанному размеру шрифта. Спецсимвол HTML — имеет ширину в 1 em: «—».
Используй для указания размеров шрифта!
- rem (от root em). 1 rem равен вычисленному значению font-size главного элемента. Используй для указания размеров шрифта!
- pt, пункт (desktop publishing point). Равен 1⁄72 дюйма, или 0.353 мм. Используется в Microsoft Word как основная единица. Не используй в web-страницах!.
Как устроено свойство font-size (размер шрифта) в CSS
- font-size наследуется по всему дереву документа
- Если нигде не было определено свойство font-size, то значение единичного em будет равно 16px, которое является значением по умолчанию
Подробнее о единицах размера и об их применении для шрифтов на сайте Консорциума Всемирной паутины (по-русски).
Использование внешних шрифтов
- Для выбора и подключения внешнего шрифта зайти на сайт fonts.google.com. На нем свободно доступно более 900 шрифтов.
- Не для всех шрифтов есть кириллическое написание. Поэтому, на Google Fonts необходимо указать язык шрифта: выбрать Cyrillic.
- Для выбора шрифта нужно нажать на знак добавления "+" в верхнем правом углу блока шрифта. Появится черная полоса снизу с указанием количества выбранных шрифтов. По клику полоса раскрывается, показывая два блока кода.
- Первый блок — тег <link>. Вставить в «голову» (тег <head>) html-файла.
- Второй блок – правила css (свойство css font-family и значение, в котором указано название шрифта и его семейство) для использования выбранных шрифтов. Вставить в блок объявлений нужного селектора.
- Альтернатива – скачать шрифт с Font squirrel, справа в разделе Languages выбрать Cyrillic, скачать (форматы файлов ttf, otf, woff, svg) и подключить с помощью правила @font-face, рецепт.
Переносы строк и тег pre
- Для сохранения переносов строк используется тег <pre> или свойство white-space: pre
- Для тега pre по умолчанию установлен моноширинный шрифт: font-family: monospace.
Примеры
«Мой дядя самых честных правил,
Когда не в шутку занемог,
Он уважать себя заставил
И лучше выдумать не мог.
Его пример другим наука;
Но, боже мой, какая скука
С больным сидеть и день и ночь,
Не отходя ни шагу прочь!
Какое низкое коварство
Полуживого забавлять,
Ему подушки поправлять,
Печально подносить лекарство,
Вздыхать и думать про себя:
Когда же черт возьмет тебя!»
Шрифты для латинского алфавита
Dancing+Script. Minus, dolore unde laborum ab ut quasi nihil recusandae error, laboriosam optio omnis nesciunt explicabo deleniti reprehenderit in excepturi adipisci expedita et animi neque assumenda veniam at molestias numquam.
Calistoga. Quisquam ullam fugiat pariatur dolore assumenda deserunt minima mollitia. Recusandae vero tempora id.
Odibee+Sans. Tempora beatae suscipit voluptatem libero, optio voluptatum quod, cumque, asperiores sit quia iusto corrupti officiis eaque animi nemo sint?
Caveat. Ullam doloribus cupiditate soluta, facere, nulla at quas unde magnam perferendis molestias ex quisquam quia!
Ссылки