Обновлено: 27.08.2018 18:04

CSS - работа со шрифтами

Для внешнего вида WEB - сайта большое значение имеет то, как и какие шрифты (fonts) Вы используете. Шрифт определяет начертание букы текста.

Все шрифты, которые сайт использует, должны быть всегда доступны браузеру клиента, откуда бы он ни смотрел сайт (Windows, Linux, Android, Mac , ...).

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

Указания браузеру, какие именно шрифты использовать, даются с помощью CSS - директивы font-family.

Например - для двух CSS - классов (.MySansSerif и .MyMonospace ) :

.MySansSerif { font-family: Arial, Helvetica, sans-serif; } .MyMonospace { font-family: "Courier New", Courier, monospace; }

Для этой директивы (font-family) в качестве значения задаётся список имён шрифтов (через запятую, в порядке приоритета), из которых браузер выбирает доступные шрифты (Arial, Helvetica, sans-serif).

Универсальные WEB - шрифты (Safe web fonts)

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

По типу шрифтов.

Шрифты Serif

font-family	Пример шрифта
Georgia, serif	Пример шрифта
"Times New Roman", Times, serif	Пример шрифта
"Palatino Linotype", Palatino, "Book Antiqua", serif	Пример шрифта

Шрифты Sans-Serif

font-family	Пример шрифта
Arial, Helvetica, sans-serif	Пример шрифта
"Arial Black", Gadget, sans-serif	Пример шрифта
Impact, Charcoal, sans-serif	Пример шрифта
Tahoma, Geneva, sans-serif	Пример шрифта
"Trebuchet MS", Helvetica, sans-serif	Пример шрифта
Verdana, Geneva, sans-serif	Пример шрифта

Шрифты Monospace

font-family	Пример шрифта
Courier, monospace	Пример шрифта
"Courier New", Courier, monospace	Пример шрифта
"Lucida Console", Monaco, monospace	Пример шрифта

Шрифты Cursive

font-family	Пример шрифта
"Comic Sans MS", cursive	Пример шрифта
"Courier New", Courier, monospace	Пример шрифта
"Lucida Console", Monaco, monospace	Пример шрифта

Сохранение шрифтов на сервере

WEB - шрифты можно хранить на сервере, вместе с WEB сайтом. Для этого нужно:

сохранить файлы шрифтов на сервере
при помощи CSS директивы @font-face описать шрифты, которые предполагается использовать в документе
при помощи директивы CSS font-family закрепить шрифты за HTML - элементами.

Файлы - описания шрифтов можно купить у разработчика, можно скачать бесплатные (например - Google Fonts).

В директиве @font-face указывается имя, под которым далее шрифт будет использоваться в HTML - документе, путь к папке со шрифтами на сервере и имя файла, содержащего конкретный шрифт.

Например:

@font-face { font-family: Molle-Regular; src: url(Molle-Regular.ttf);

Далее этот шрифт можно использовать через CSS директиву font-family. Например директива:

.MyMonospace { font-family: Molle-Regular; }

назначает классу .MyMonospace шрифт из файла: Molle-Regular.ttf

Использование шрифтов из библиотек (CDN - Content Delivery Network)

Существует ряд online- ресурсов, на которых хранятся шрифты, и с которых эти шрифты можно подгружать в HTML документ.

Например, команда:

подключает к HTML документу шрифт "Open Sans"; . И далее его можно использовать через CSS - директиву

font-family: "Open Sans";

В удобной форме посмотреть доступные Google-шрифты и сразу получить ссылку на нужный можно, например, по этой ссылке: fontcdn.org

Дополнительные свойства шрифтов

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