Как установить шрифт на сайт css

Как подключать свои шрифты на сайт, или все о @font-face в CSS

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5

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

font-face

Для подключения своих шрифтов на сайт в CSS есть специальнаая конструкция @font-face <>, в которой описывается ваш личный шрифт и в будущем его можно использовать в любом месте на сайте.

Для начала поговорим о форматах файлов шрифтов для браузеров, их всего несколько: TTF, EOT, WOFF, SVG. Каждый из них подходит к нескольким браузерам, но как выяснилось нет ни одного уникального на данный момент, как как выглядит поддержка того или иного формата в браузерах:

Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.05+

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

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

Давайте теперь разберемся с тем, что и как тут работает:

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

Эта строчка специально выделяет путь до файла шрифтов формата ".EOT".

В этой строчке мы прописываем вначале "local(BuxtonSketch)" этим мы проверяем наличие шрифта у посетителя сайта, если его нету, то мы дополнительно подгружаем его, для этого дальше мы прописываем путь до файла шрифтов и далее указываем что за формат у этого файла.

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

Вот как будет выглядить полноценный пример подключения стороннего шрифта и последующее использование его для всех тегов <p></p>:

Учитывая, что все файлы шрифтов лежат в папке "fonts".

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

Так же хочу посоветовать вам сайт http://www.font2web.com/, хоть он и на английском все довольно понятно, вы выбираете файл шрифтов формата .ttf или .otf, нажимаете на кнопку "Convert & Download", после чего начнется загрузка всех откорвентированных форматов с примером их использования.

Так же вы можеет скачать пример использования шрифта, который я тут показывал:

Урок 4: Шрифты

В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:

Семейство шрифта [font-family]

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma". Generic family Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример — sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:

Three examples of generic families and some of their family members

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

Список шрифтов может выглядеть так:

Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта [font-style]

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.

Вариант шрифта [font-variant]

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

Размер шрифта [font-size]

Размер шрифта устанавливается свойством font-size .

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

Есть одно отличие в указанных единицах измерения: ‘px‘ и ‘pt‘ дают абсолютное значение размера шрифта, а ‘%‘ и ‘em‘ — относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как ‘%‘ или ‘em‘.

Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами — прекрасное свойство, как вы полагаете?

Сокращённая запись [font]

Используя сокращенную запись font , можно указывать все свойства шрифта в одном стилевом правиле.

Например, вот четыре строки описания свойств шрифта для <p> :

Используя сокращённую запись, код можно упростить:

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Резюме

Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь. В следующем уроке мы разберёмся с текстом.

Добавить комментарий

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