Работа с шрифтами. Задание размера, начертания и настройка отображения. Урок 8

В этом уроке мне хотелось бы рассказать про шрифты более подробно. С базовыми CSS правилами, которые используются для оформления шрифтов, такими как font-family, color и font-size вы уже должны быть знакомы по предыдущим урокам. Сейчас мы будем рассматривать и остальные свойства.

font-weight

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

Пример использования:

font-weight: bold;  – полужирное начертание,

font-weight: normal; - начертание по умолчанию, то есть обычный текст.

text-decoration

Делает текст подчеркнутым, зачёркнутым или надчёркнутым.

Пример использования:

text-decoration: underline; - подчёркнутый текст.

text-decoration: overline; - надчёркнутый текст.

text-decoration: line-through; -зачёркнутый текст.

Семейство шрифтов.

Их бывает несколько, мы уже познакомились с вами с таким семейством, как sans-serif, которое относится к семейству шрифтов без засечек. В него входят такие шрифты, как Verdana, Arial, TrebuchetMS и Geneva. Следует сказать, что данное семейство шрифтов ко всему прочему ещё является и читабельным.

Семейство serif наоборот, относится к семейству с засечками. Включает в себя такие шрифты как TimesNewRoman и Geneva.

Семейство monospace – в семействе данных шрифтов особенностью является то, что ширина всех букв одинакова. Пример шрифта из данного семейства – Courier.

Семейство cursive – шрифты, к особенности которых можно отнести их начертание подобно рукописному тексту. Пример такого шрифта – ComicSans.

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

Мы уже знаем, что для задания того или иного шрифта используется свойство font-family, а через двоеточие название шрифта. Но можно часто встретить и такую запись:

font-family: Arial, Verdana, sans-serif;

Данная запись означает, что если на компьютере пользователя есть шрифт Arial, то сначала будет использован именно этот шрифт. Если его нету, то второй. А если и второго не окажется, то используем шрифты без засечек, установленные браузером. На практике такое я не использовал, и честно говоря, не понимаю где это может пригодиться, поскольку сложно предусмотреть, какие шрифты установлены на компьютере пользователя, а какие нет. Но тем не менее следует знать, что такая запись возможна.

Примечание. Кстати, если в названии подключаемого вами шрифта используются пробелы, то его следует заключить в кавычки. Вот таким образом font-family: "TimesNewRoman".

Размеры шрифта.

Есть несколько единиц, с помощью которых мы можем задать размер шрифта.

px– размер шрифта в пикселях. Например:

body {
  font-size: 14px;
}

Следует заметить что пробела перед px быть не должно. Так же обратите внимание, что я в данном примере использую технику наследования. Задав тэгу body размерность шрифта, все нижележащие элементы (вложенные, если так понятнее), наследуют свойства элемента body - font-size. Это очень удобно, так как не приходится прописывать семейство и размерность шрифта для каждого абзаца или заголовка.

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

Пусть мы для элемента body прописали размер шрифта 14px. Это собственно и есть наша база, кроме того, она будет наследоваться нижележащими элементами. Такими как p или h1. А теперь я хочу, чтобы к примеру заголовок первого уровня у меня был 28px, то есть в 2 раза больше. Я могу указать это с помощью процентов вот так:

h1 {
  font-size: 200%;
}

Тем самым я и ответил на вопрос «Процент от чего?». От наследуемого размера шрифта. А какое это преимущество даёт, можете спросить вы. К примеру, если мы захотим немного увеличить размер шрифта, то мы сможем сделать это в одном месте. В правиле для тэга body. В противном случае, нам бы пришлось прописывать правила для каждого элемента. А так, мы сэкономили немало времени.

Ещё есть такая единица как em. Как и проценты, её так же можно отнести к относительной величине. По сути, она является коэффициентом. Если у body задана ширина, равная 14px, а заголовок первого уровня, мы хотим сделать равным 21px, то мы можем использовать следующее правило: 

h1 {
  font-size: 1.5em;
}

em и проценты, это в принципе взаимозаменяемые вещи. Так что можно использовать то, что больше всего вам придётся по вкусу. 

Альтернативный способ задания размера шрифта

Так же можно встретить запись, где в качестве значения font-sizeмогут фигурировать различные слова. Такие как: 

small, x-small, xx-small, medium, large, x-large, xx-large

А в стилях может быть прописано следующее правило:

font-size: medium;

Это ключевые слова, значения для которых в браузере может задать сам пользователь. Фактически, мы передаём управление шрифтами самому пользователю. В тэге body, с помощью font-size: medium мы как бы предполагаем, что на страничке все шрифты должны быть среднего размера. Не слишком большого, но и не слишком маленького, а пользователь с помощью браузера, сам устанавливает необходимое значение. 

small-x это примерно меньше на 20% от small.
large-x наоборот на 20% больше от large.

Но откровенно говоря, я почти нигде не видел чтобы кто-то задавал шрифт подобным образом. 

Наклонное начертание

Задаётся с помощью свойства:

font-style: italic;

Причём рендеринг шрифта может отличаться разительно, в зависимости от того, поддерживает ли сам шрифт данное написание или нет. Если второй случай, то браузер всё равно отобразит текст слегка в наклонённом виде, но без засечек.

Похожий эффект можно достичь с помощью:

font-style: oblique;

Различие этих двух свойств будет напрямую зависеть от применяемого шрифта.