Не знаешь с чего начать? Тогда раздел "Учебник" для тебя! =)

Веб-шрифты и как их подключать на сайте?

Рубрики: Блоговедение,Основы. автор: Sergio

Янв.28,2017

Как поменять шрифт на своем сайте? Как подключить общедоступные шрифты из библиотеки Google Fonts, а что делать, если шрифт эксклюзивный? Если вопросы для вас актуальны, читаем дальше

Форматы шрифтов

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

Помимо принадлежности к конкретным системам они отличаются технологией отрисовки символов и методом сжатия. От последнего зависит объем получаемого файла, что напрямую влияет на время его загрузки, а значит – и на скорость отображения страницы. Это критично только при установке нового шрифта, так как после скачивания содержащий его файл будет храниться в кэше. На данный момент при внедрении конкретного шрифта на сайт необходимо подготовить все эти форматы шрифта: TTF (или OTF), WOFF,EOT и SVG .

Подключение Google Fonts

Для того чтобы облегчить работу со шрифтами, компанией Google был создан сервис «Fonts», в котором представлено несколько сотен шрифтов, включая десятки кириллических.

После выбора нужных шрифтов, а их может быть несколько, сервис формирует свернутое окно с режимами «стандарт» и «импорт», каждый из которых имеет два вида кода:

добавляем спец. строчку к заголовку HTML-документа между тегами <head> + прописываем нужную комбинацию в CSS-файле;
либо пишем другую строчку между тегами <style>, импортируя шрифт, + снова прописываем специальную строчку в CSS-файле ).

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

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

Использование собственного шрифта

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

Где

"FontName" — название шрифта, который пытаемся подключить.
url ("/path/FontName.eot") — здесь мы указываем путь, где лежит наш файл со шрифтом в формате .eot.

font-weight: normal; — этим значением мы задаем насышенность шрифта: обычная, полужирная, жирная и т.д.

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

font-style: normal; — здесь мы задаем начертение текста: нормальное, курсив или наклонное

font-style: normal | italic | oblique

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

Т.е последовательность формирования правила «@font-face» такая:

Загружаем на сервер сайта файлы с разными форматами выбранного шрифта. Ещё раз напомню, что разные форматы загружаются для того, чтобы его поддерживали все браузеры;
Указываем в коде название шрифта, и прописываем ссылку на файл;
Добавляем имя шрифта в свойство font-family"" элемента, который будет отображаться данным шрифтом.

Если у шрифта разные начертания распиханы по отдельным файлам: для начертания regular один файл, для жирного начертания (bold) второй, для курсива (italic) — третий, значит и подключать эти начертания будем каждый. Итого, для каждого начертания необходимо 3 раза прописать правила: меняя путь, расположения файла на сервере, значения font-weight и font-style.

В CSS-правилах кроме нашего шрифта так же принято через запятую указывается другие шрифты, так сказать — основной и дополнительный. Это делается для тех случаев, если на определенном устройстве или в отдельно взятом браузере основной шрифт не распознаётся ( не может быть установлен), тогда браузер отображает информацию с помощью дополнительных шрифтов. По поводу дополнительных: рекомендуется применять самые распространенные шрифты, которые есть практически на всех компьютерах: Arial, Courier New, Georgia, Times New Roman и Verdana.