HTML-верстка: инструменты и приемы профессиональной front-end разработки

Шрифт в CSS


назад вперед

Свойство CSS font определяет тип шрифта, толщину его линий, размер и стиль.


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

На рисунке представлены буквы из двух семейств шрифтов: Serif и Sans-Serif. Разницу между ними можно увидеть невооруженным глазом, у шрифта семейства Serif на концах штрихов имеются маленькие засечки. Слово Serif переводится как "засечка", а слово Sans — как "без". Поэтому шрифт sans-serif переводится как "без засечек". При печати лучше использовать шрифты Serif, так как они облегчают чтение. Для компьютерных мониторов лучше использовать шрифты Sans-serif.


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

В CSS существует два типа названий семейств шрифтов:

Общее семейство Семейство шрифтов Описание
Serif Times New Roman
Georgia
Шрифты Serif имеют засечки на концах штрихов символов
Sans-serif Arial
Verdana
"Sans" означает "без" — эти шрифты не имеют засечек
Monospace Courier New
Lucida Console
Символы имеют одинаковую ширину

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

Семейство шрифта указывается в свойстве font-family.

Свойство font-family должно содержать несколько названий шрифтов на всякий случай. Если браузер (а точнее ОС) не поддерживает первый шрифт в списке (этот шрифт не установлен в ОС), он попытается использовать следующий шрифт из списка шрифтов.

Начинайте список шрифтов с желаемого, заканчивайте его названием общего семейства, если указанных вами шрифтов не будет в ОС, браузер выберет доступный шрифт из общего семейства.

Заметка: если название семейства шрифта состоит из нескольких слов, оно должно быть помещено в кавычки, например, font-family: "Times New Roman".

Названия шрифтов перечисляются через запятую:

Пример

p{font-family:"Times New Roman", Times, serif;}

Посмотреть

Чтобы увидеть часто используемые комбинации шрифтов, ознакомтесь со списком безопасных веб-шрифтов.


Стиль шрифта

Свойство font-style обычно используется для оформления текста в виде курсива.

Свойство имеет три значения:

Пример

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Посмотреть


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

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

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

Используйте правильные теги, например, h1-h6 для заголовков и тег p для параграфов.

Значение свойства font-size можно указать в относительных и абсолютных величинах.

Абсолютные величины:

Относительные величины:

Если не указать размер шрифта, будет подставлено значение по умолчанию, которое равно (для параграфов) 16px (16px=1em).


Размер шрифта в пикселях

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

Пример

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Посмотреть

Этот код позволяет изменять размер текста во всех браузерах, кроме Internet Explorer.

Размер текста можно изменить с помощью инструмента масштабирования (при этом меняется размер всей страницы, а не только текста).


Размер шрифта в em

Многие веб-мастера используют em вместо пикселей, чтобы избежать проблем с масштабированием в Internet Explorer.

Размеры в em рекомендуются W3C.

1em равен размеру шрифта по умолчанию. Размер шрифта по умолчанию равен 16 пикселям. Таким образом, 1em равен 16 пикселям.

Размер шрифта в em можно перевести из пикселей по формуле: пиксели/16=em

Пример

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Посмотреть

В этом примере, размер текста в em равен размеру текста в пикселях. Однако, этот способ позволяет масштабировать текст во всех браузерах.

К сожалению, в браузере IE можно заметить следующую проблему: при увеличении/уменьшении размера шрифта, он увеличивается/уменьшается больше, чем ожидалось, то есть непропорционально.


Комбинация % и em

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

Пример

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Посмотреть

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


Примеры

"Жирность" шрифта

Настройка толщины линий шрифта.

Свойство font — краткая запись

Использование краткой записи для определения всех свойств шрифта.


Все свойства шрифта — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
font
Все свойства шрифта одной записью font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
1
font-family
Семейство шрифта название- семейства
общее-семейство
inherit
1
font-size
Размер шрифта xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
размер
%
inherit
1
font-style
Стиль шрифта normal
italic
oblique
inherit
1
font-variant
Трансформация букв шрифта в уменьшенные заглавные буквы normal
small-caps
inherit
1
font-weight
Ширина линий шрифта ("Жирность") normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit
1


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта