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

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

Видеоверсия:
[iframe id="https://www.youtube.com/embed/mG1FT2_2dsY?rel=0&vq=hd720" align="center" mode="normal" autoplay="no" maxwidth="1280"]


Свойство font-family

Используя данное свойство, мы задаем шрифт тем или иным элементам веб-страницы. Например, для отображения всех абзацев шрифтом Lucida Console, мы создаем следующее CSS правило:

p { font-family: 'Lucida Console'; }
Обратите внимание, что при указании шрифта, состоящего из нескольких слов, ее название необходимо заключать в кавычки. Возможно вы помните, что в MacOS нет шрифта Lucida Console, но есть ее альтернатива - Monaco. Специально для таких случаев мы можем дать браузеру указание использовать для всех абзацев шрифт Lucida Console, но если ее не окажется, использовать Monaco. Такого рода инструкция выражается следующим CSS правилом:

p { font-family: 'Lucida Console', Monaco; }
Из записи выше можно понять, что альтернативный шрифт задается через запятую после основного, и таких запасных вариантов можно указывать сколь угодно много. Самым безопасным вариантом считается задание в самом конце семейства шрифта. В случае отсутствия всех перечисленных шрифтов, браузер возьмет имеющийся из указанного семейства.

p { font-family: 'Lucida Console', Monaco, monospace; }

При помощи такой записи мы обезопасим себя от непредвиденных проблем с корректным отображением текста на веб-странице, ведь в самом неблагоприятном случае будет использован шрифт из указанного нами семейства. Советую вам всегда пользоваться именно такой записью.  А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Оставить комментарий

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

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

пятнадцать − 2 =

Закрыть