@font-face в CSS


Содержание

@font-face. Нестандартный шрифт средствами CSS.

В очередном проекте в очередной раз вижу заголовки и меню нестандартным шрифтом. Сделать картинками? Отстой: неудобно, негибко, медленно. Flash? Терпеть его не могу. Javascript? Лучшее конечно на сейчас решение, но все равно это костыль, который напоминает об инвалидности браузеров. Пора покопать стандарты: что предлагают и где это уже работает.

Заметка

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

Задача

Внедрить нестандартный шрифт без использования картинок, javascript и flash. Используем только последние достижения в CSS.

Решение

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

Таким методом можно внедрить любой шрифт форматов OTF и TTF.

Вот только для IE не все так просто. Хотя он и первый начал поддерживать внедрение сторонних шрифтов (еще с 1997 года с выходом Internet Explorera 4-й версии. ), он требует особого формата для шрифта — EOT (Embedded OpenType). Формат EOT решает сразу две задачи:

  • сжимает файл шрифта, делая его вес в разы меньше (судя по тестам коллег этот метод лучше сжимает чем и RAR, и ZIP, и gzip методы)
  • шифрует файл: в файл шрифта записывается информация, где он должен быть использован. Вне этого адреса этот шрифт работать не будет.

В итоге подключение шрифта в стилях будет выглядеть в виде такого хака:

Вместо хака можно воспользоваться условными комментариями.

update 23.08.11 Более полный синтаксис внедрения шрифта, в котором учтены некоторые возможные баги IE и большая поддержка браузеров:

Заметка

update 10.11.10 В IE local может не срабатывать. Более того, из-за него может не подключаться шрифт вообще. В своих проектах на этот момент обращаем внимание: если не работает, просто убираем для IE local.

Преимущества:

  • гибкость — владелец сайта может как угодно менять любые тексты;
  • быстрая скорость загрузки — минимальное количество внешних файлов при любом количестве текста нестандартным шрифтом;
  • максимальная скорость работы сайта — ноль дополнительных элементов в DOM структуре, ноль скриптов и flash объектов, замедляющих сайт;
  • текст ведет себя как текст (ведь он же остается текстом), т.е. выделяется, реагирует на изменения цвета, жирности, начертания и т.п., идеальное СЕО;

  • довольно простая реализация даже с учетом оптимизаций шрифта.

Недостатки:

  • не всеми браузерами поддерживается: понимают IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+;
  • большой вес шрифта — может достигать нескольких мегабайт (с этим можно и нужно бороться);
  • пока подгружается шрифт, пользователь в одних браузерах (IE, Firefox, Opera) видит отображение текста обычным шрифтом, в других — вообще не видит текст (Safari, Chrome);
  • дорогой шрифт могут стырить, а за это владельца сайта пригласить в суд;
  • могут проскакивать мелкие баги при ховере — не перекрашивается полностью текст (Safari, Chrome, Opera)

Сжатие и конвертация шрифта

Если разработчики шрифта пытались угодить всем и вся, тогда шрифт скорей всего будет содержать символов много-много и соответственно весить много-много. Так шрифт Arial Unicode MS содержит 51 тысячу знаков и весит 23 с лишним мегабайт! Самое время подумать, а будет ли на сайте использоваться удмуртский или фино-угорские языки? А еще различные дополнительные символы, знаки препинания и цифры? А еще следует обратить внимание, что каждый шрифт имеет определенное количество начертаний: обычный, курсив, жирный, полужирный. Шрифт может содержать до 9 видов жирности (вспомни допустимые значения font-weight).

Что делать

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

Как делать

С этим могут помочь:

Онлайн сервис @font-face Generator
  • два режима работы: Easy — кто не хочет вникать и Expert — для максимальной оптимизации
  • разные форматы результатов и это в одном месте! Т.е. не нужно сначала сжимать для всех браузеров True Type, а потом еще отдельно конвертировать в EOT для IE
  • различные опции получения результата. Вплоть до защиты шрифта от локального использования и файла для Cufon!
  • точный выбор символов для сжатого шрифта. Можно указать язык и набор дополнительных символов, а можно указать диапазон используемых символов, или просто перечислить символы, которые нужны, или использовать симбиоз всех способов
  • для тех кто слаб в CSS, даже стилевые правила сформируют

Для эксперимента сжимал шрифт весом в 145Кб с тестовой задачей «Использовать для меню». Оставил только маленькие русские буквы. Итоговый размер шрифта вышел 8Кб. Поразительно!

  • EOT формируется без привязки к определенному домену (для серьезных проектов все же придется EOT делать отдельно)
  • не все лицензионные шрифты может обработать (это недостаток относительный)

Впечатление — фантастика, превосходно, супер-пупер, обалдеть. Заведу себе Pay Pal чтобы сделать Donate.


Web Font Optimizer

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

Из плюсов: прост и понятен. В качестве результат получает True Type сжатый шрифт, EOT шрифт для IE и CSS код для подключения.

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

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

TTF2EOT

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

Online Font Converter

Прост в работе, позволяет конвертировать и лицензионные шрифты. Доступен тут.

Из минусов: требуется обязательно регистрация.

Как быть с защитой шрифта?

Если шрифт качественный, он разрабатывается высокими профессионалами, часто командой профессионалов, часто не один месяц. Такой шрифт может стоить не меньше, чем «Жигули» с конвейера. Разработчики шрифтов стали их регистрировать как торговые марки, закрепляя права правообладателя на шрифт уже на уровне охраны промышленной собственности.

Т.е. для использование шрифта в веб, владелец сайта должен приобрести шрифт с правом использования в веб. Но приобретение — это пол проблемы. Нужно еще шрифт защитить от нелегального копирования. Таких проблем почти нет, если лицензионный шрифт на сайте реализован картинками или с помощью Javascript. Но если внедрять через @font-face, шрифт открыто лежит на сервере, который любой пользователь может скачать. А это уже грозит судебными исками.

Заметка

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

Как же защитить шрифт?

Для IE эта проблема была решена сразу — формат EOT шифрует файл. Как следствие имеем шрифт, который будет работать только в пределах данного сайта.

Для остальных браузеров полной защиты нынче нет.

Заметки

  • новый формат WOFT, который призван защищать шрифт по типу EOT, но пока не получил широкой поддержки в браузерах.
  • в @font-face kit generator можно поставить галочку «Для использования только в WEB» — это спасет от инсталлирования шрифта на локальные машины, но не от копирования на другие сайты.


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

@font-face + data:url

Чтобы избежать дополнительного запроса к серверу, шрифты можно внедрить в CSS с помощью data:url. Синтаксис будет таким:

Илон Маск рекомендует:  Что такое код cpdf_set_text_rise

Вывод

@font-face — это шаг к новым возможностям для веб разработчика. Это шаг к более быстрым, удобным и разнообразным сайтам. Но из-за не полной кроссбраузерности и проблем с защитой авторских прав, @font-face в чистом виде пока не стоит применять.

CSS @font-face Rule

Example

Specify a font named «myFirstFont», and specify the URL where it can be found:

More «Try it Yourself» examples below.

Definition and Usage

With the @font-face rule, web designers do not have to use one of the «web-safe» fonts anymore.

In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Browser Support

The @font-face rule is supported in Internet Explorer, Firefox, Opera, Chrome, and Safari.

The numbers in the table specifies the first browser version that fully supports the font format.

Font format
TTF/OTF 4.0 9.0* 3.5 3.1 10.0
WOFF 5.0 9.0 3.6 5.1 11.1
WOFF2 36.0 Not supported 35.0* Not supported 26.0
SVG 4.0 Not supported Not supported 3.2 9.0
EOT Not supported 6.0 Not supported Not supported Not supported

*Edge and IE: The font format only works when set to be «installable».

*Firefox: Disabled by default, but can be enabled (need to set a flag to «true» to use WOFF2).

Syntax

Font descriptor Values Description
font-family name Required. Defines the name of the font.
src URL Required. Defines the URL(s) where the font should be downloaded from
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default value is «normal»
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default value is «normal»
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default value is «normal»
unicode-range unicode-range Optional. Defines the range of unicode characters the font supports. Default value is «U+0-10FFFF»


More Examples

Example

You must add another @font-face rule containing descriptors for bold text:

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many @font-face rules for the same font.

CSS свойство @font-face

Благодаря правилу @font-face веб-дизайнеры больше не ограничены набором «веб-безопасных» шрифтов. Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

При описании шрифта в правиле @font-face сначала необходимо определить имя шрифта (например, myFirstFont), а затем указать на файл шрифта.

Совет: В URL следует использовать только буквы в нижнем регистре, написание в верхнем регистре может привести к непредсказуемым результатам в IE!

Чтобы затем применить, определенный при помощи правила @font-face, шрифт с HTML элементом, нужно имя шрифта (myFirstFont) указать через свойство font-family:

CSS синтаксис

Возможные значения

Дескриптор шрифта Значение Описание
font-family имя Обязательный параметр. Определяет имя шрифта.
src url(URL) Обязательный параметр. Определяет URL(ы), откуда шрифт можно загрузить.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Необязательный параметр. Определяет начертание шрифта для его уплотнения или расширения. Значение по умолчанию normal.
font-style normal
italic
oblique
Необязательный параметр. Определяет стиль шрифта. Значение по умолчанию normal.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Необязательный параметр. Определяет жирность шрифта. Значение по умолчанию normal.
unicode-range диапазон юникода Необязательный параметр. Определяет диапазон символов юникода, поддерживаемых шрифтом. Значение по умолчанию «U+0-10FFFF».

Пример

Определяем шрифт с именем «myFirstFont» и URL, где его можно найти

Подключение шрифтов в CSS

Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?

Коллекция Google Fonts

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

в зависимости от способа подключения (в HTML или в CSS).

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

Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.


Самостоятельное подключение

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

Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.

Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot и .woff и даже таинственный .ttf .

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

Настройки шрифта

Каждое правило будет выглядеть примерно так:

Как осуществить подключение нескольких шрифтов в css?

Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.

Почти все из них используются на странице. Вопрос вот в чем, если мне нужно подключить три файла из двенадцати или более, как должна выглядеть запись в @font-face?

Как будет правильно?

  • Вопрос задан более трёх лет назад
  • 50317 просмотров

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Font-Face: подключение нестандартных шрифтов

Здравствуйте дорогие друзья! В данном посте хотел бы разобрать такой немаловажный момент в верстке, как подключение нестандартных шрифтов. Считаю, что каждый верстальщик должен изыскать методы «борьбы» с нестандартными шрифтами, иначе полет фантазии дизайнера закончится на стандартных шрифтах. Нестандартные шрифты в макете PSD для меня всегда были проблемой: использовать картинки — не удобно и не качественно; использовать скрипты, подобные cufon не совсем подходящий вариант, некоторые моменты, указанные в документации у меня не работали да и вовсе я не хочу уже этим заморачиваться.

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

Css-код будет иметь следующий код:


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

Вот примерный список поддерживаемых форматов браузерами:

Поддерживаемые браузеры Формат
Internet Explorer 6+ EOT
Mozilla Firefox 3.5+
Opera 10+
Chrome 4+
Safari 3.2+
Opera mobile 10+
iOS 4.2+
Android 2.2+
OTF и TTF
Opera 9+
Chrome 4+
Safari 3.2+
Opera mobile 10+
iOS
Android 3
TTF и SVG
Internet Explorer 9
Firefox 3.6+
Opera 11+
Google Chrome 6+
Safari 5.1
Opera Mobile 11+
WOFF

Такое обилие форматов обусловлено максимальной поддержкой всех браузеров. При этом, браузер загружает первый понятный ему из списка шрифт (при условии указания правильного формата). Форматы описываются в порядке увеличения веса. Но, не смотря на то, что формат «WOF» самый легкий, на первом месте стоит — «EOT». Это необходимо для избежания неккоретного отображения в IE 6-8.

Стоит ли указывать — format?

Декларация «format» необходима для того, чтобы браузер смог сразу определить для себя нужный ему формат. Т.е. при загрузке он всего лишь отбирает нужный и понятный ему формат из списка. Что будет если не указать format? Если у вас не указан формат, но при этом подключено более одного браузер их начнет грузить все подряд и перебирать в поиске нужный. Отсюда следует, что подключая более одного формата шрифтов, указание декларации «format» обязательно! Не забывайте, что на обработку тратиться определенное время, а здесь мы можем выиграть.

Для задействования всех форматов наш css-код примет следующий вид:

Таким образом следует, что, в данном случае, в каталоге «fonts» должны храниться все, перечисленные выше форматы одного шрифта. А где их взять, если в нашей ОС установлен лишь формат — TTF? Для этого воспользуемся специальным сервисом преобразования форматов шрифтов — http://fontface.codeandmore.com. Все, что вам необходимо сделать это загрузить необходимый шрифт из нашей ОС, нажать на большую красную кнопочку «I want my @font-face kit! » и сервис в считанные секунды сгенерирует нам пакет шрифтов необходимых форматов.

Внимание! Данный сервис теперь платный. Сервис теперь доступен по подписке, правда цена символическая — 1 мес. — 3$.

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

Распакуйте данный архив в какой либо каталог вашего шаблона, например, создав папку — fonts. Откройте любым текстовым редактором файл с расширением .html (в моем случае это файл arbat.html) и скопируйте оттуда правила font-face и вставьте их в свой файл стилей (только без тегов «»).

Важно! Измените пути к файлам шрифтов на корректные, иначе ничего работать не будет!

Далее необходимому элементу мы прописываем в стилях имя шрифта:

Еще сервисы Font-Face

В качестве альтернативы могу также предложить бесплатные сервисы-генераторы font-face:

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

На последок я хотел бы отметить все преимущества и недостатки данного метода.

Преимущества:

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

  • довольно просто реализовать с учетом генерации необходимых форматов.

Недостатки:

  • данный метод поддерживается не всеми браузерами, даже несмотря на то, что мы использовали различные форматы. Не забываем, что у каждого браузера может быть много версий;
  • некоторые файлы шрифтов могут быть довольно таки тяжелыми и весить несколько мегабайт (хотя, это решаемо), а это может значительно повлиять на скорость загрузки страницы;
  • пока шрифт подгружается пользователь хоть и на мгновение, но все же видит стандартный шрифт (здесь зависит от размера шрифта);
  • могут появляться иногда незначительные баги — при наведении мышкой искажается цвет (Safari, Chrome, Opera);
  • у шрифта может быть правообладатель, а в данном случае его легко будет украсть.

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

Ну вот и все, что я хотел сказать по поводу подключения нестандартных шрифтов. Жду реплики в комментариях. Всем удачи! Встретимся в следующих постах…

Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Использование веб-шрифтов или как не применять правило @font-face

Дата публикации: 2015-03-26

От автора: Использование правила @font-face для загрузки кастомных (пользовательских) веб-шрифтов — это великолепная возможность создать для наших сайтов уникальный и запоминающийся стиль. Однако, когда кастомные шрифты применяются в вебе с использованием стандартных техник, то они могут снизить скорость загрузки и отрицательно сказаться на производительности (как реальной, так и воспринимаемой пользователями). К счастью, мы определили некоторые методы, внимательное применение которых обеспечит вашему сайту баланс юзабилити, производительности и стиля.

Проблема с правилом @font-face

Объявление CSS правила @font-face является стандартным подходом для указания кастомных шрифтов в вебе:

Просто и понятно, но, к сожалению, стандартная обработка правила @font-face в большинстве браузеров является проблематичной. Когда вы ссылаетесь на внешний веб-шрифт, используя @font-face, большинство браузеров сделают любой текст, к которому применяется данный шрифт, полностью невидимым на время загрузки данного внешнего шрифта. [См. рис. 1]. Некоторые браузеры подождут загрузки шрифта какое-то предустановленное количество времени (обычно три секунды), прежде чем покажут данный текст, используя альтернативный шрифт, указанный в свойстве font-family. Но браузеры на «движке» WebKit (Safari, стандартный браузер Android, Blackberry), прямо как преданные песики, будут ждать целую вечность (ладно, обычно 30 или более секунд) загрузки нужного шрифта. Это означает, что ваши кастомные шрифты представляют собой потенциальную «единую точку отказа» для доступного сайта.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Рис. 1: Скриншот веб-страницы, загружаемой в iOS Safari, где текст остается невидимым во время загрузки кастомных шрифтов.


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

Например, на рис. 2 показана временная линия на сайте webpagetest.org, на которой видно, как сайт filamentgroup.com будет выглядеть при стабильном 3G соединении, если бы использовалось стандартное поведение при загрузке шрифтов. Обратите внимание на то, что текст, к которому применяется правило @font-face, начинает отображаться только спустя целую секунду после первичного рендеринга:

Рис. 2: Временная линия загрузки сайта Filament Group (использование стандартной загрузки шрифтов). При 3G соединении загрузка шрифтов задерживается на целую секунду.

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

Вот критерии, которыми вы должны руководствоваться при оценке подхода по загрузке шрифтов:

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

Запросы шрифтов должны быть настроены таким образом, чтобы во время их загрузки отображался альтернативный текст, что позволит избежать мерцаний/бликов при загрузке текста (the Flash of Invisible Text или FOIT).

Как загружают шрифты в Filament Group

Чтобы оптимизировать первое отображение текста, мы сначала убеждаемся в том, что в свойстве font-family помимо кастомного шрифта у нас указан еще и встроенный шрифт, в нашем случае font-family: Open Sans, sans-serif;. Это стадия, на которой определяется рендеринг текста с использованием запасного шрифта, пока происходит загрузка кастомного шрифта, согласно нашему новому методу загрузки. JavaScript может быть применен, чтобы определить наилучший для использования формат шрифта (WOFF2, WOFF, TTF) и для асинхронной загрузки таблицы стилей, в которой содержатся все шрифты, прописанные с помощью data: URI. Это немного нетрадиционный подход, но это позволяет нам загружать все кастомные шрифты за один HTTP запрос. А это прекрасно сказывается как на сокращении количества перерасчетов размеров и положения элементов на странице (все шрифты появляются сразу), так и на уменьшении количества HTTP запросов в целом. Мы можем пойти еще дальше, и, после запроса шрифта, установить куки (cookie), чтобы отметить, что кастомные шрифты были закешированы, и что мы можем избежать бликов/мерцаний стандартных шрифтов на последующих страницах.

ШАГ 1: ПОДГОТОВЬТЕ ВАШИ ШРИФТЫ

Кастомные шрифты могут быть очень тяжелыми, поэтому прежде всего нужно минимизировать количество шрифтов для загрузки. Помните, что каждый вариант насыщенности (regular, light, bold) и начертания (regular italic, bold italic) шрифта является отдельным файлом, который может быстро увеличить общий объем загружаемых шрифтов. Старайтесь, чтобы общее количество кастомных шрифтов не превышало 5 штук, но мы обычно, по возможности, стараемся использовать 2-3 шрифта.

Чтобы еще улучшить доставку шрифтов, используйте технику «разбиения» шрифта, которая позволяет вам убрать из шрифта буквы и символы, которые вам не потребуются. С помощью сервиса FontSquirrel это довольно легко сделать.

ШАГ 2: ПОДГОТОВЬТЕ ТАБЛИЦЫ СТИЛЕЙ СО ШРИФТАМИ

Кодирование шрифтов с помощью data: URI

Предположим, что вы используете шрифт Open Sans в двух вариантах насыщенности: 400 и 700 (жирный). Чтобы обеспечить поддержку наибольшего числа браузеров, нам потребуется по три разных формата для каждого варианта: WOFF2, WOFF и TrueType (TTF):

Если у вас не хватает, например, одного из этих форматов, то вы можете создать его с помощью генератора шрифтов Font Squirrel.

Затем возьмите каждый из этих файлов со шрифтом и закодируйте их для последующей вставки в таблицу стилей с помощью data:URI. Если вы не знакомы с тем, как это сделать, то существует много вариантов: SASS (Compass), PHP, онлайн-генераторы или OpenSSL в командной строке (openssl base64 -in filename.woff).

Скопируйте полученный результат в три отдельные таблицы стилей, один CSS файл для каждого формата: WOFF2 (data-woff2.css), WOFF (data-woff.css) и TTF (data-ttf.css для Android). Вот, например, как может выглядеть data-woff.css:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Блог Vaden Pro

Вам попался капризный заказчик, требующий «расписные» шрифты? Или вы просто создаете стильный тематический сайт, и кастомное написание текста подчеркнет вашу авторскую идею? Рассмотрим один из способов решения данной задачи.


Когда бывает нужно

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

  • Стильное меню.
  • Стильные заголовки.
  • Логотип. Создание логотипа – дело серьезное, много книг по этому поводу написано, долго специалисты этому делу обучаются… И автор не станет отбирать у людей их хлеб, но вставит свои пять копеек. Если ваш логотип представляет собой текст, то в целях качественной SEO оптимизации выводить его следует как ТЕКСТ.

Задача заключается в использовании нестандартных шрифтов, то есть таких, которые со значительной долей вероятности отсутствуют у пользователя вашего интернет-ресурса.

Пути решения

Как и в большинстве случаев, любое задание имеет несколько путей решения, и наше – не исключение. Поехали:

  • Картинка. Отсутствует гибкость настройки, ухудшается скорость загрузки страниц, увеличивается нагрузка на сервер, SEO вообще не при делах.
  • Flash. Дополнительные файлы для загрузки, нужны навыки работы в Flash-эдиторах (параметры текста менять тоже здесь), средняя SEO.
  • JS. Дополнительные внешние файлы (и все, что из этого вытекает), средняя SEO, текст невозможно скопировать.
  • Нестандартные font-ы средствами CSS

Истинный путь самурая, или «да здравствует CSS»

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

Таким образом мы исключаем необходимость наличия выбранного нами шрифта в ОС посетителя.

Конструкция такого вида позволяет подключить TrueType (ttf) и OpenType (otf) шрифты.

Интересно: OpenType обладает бо́льшими по сравнению с TrueType возможностями предпечатной подготовки и поддерживает бо́льший набор символов при меньшем размере файла.

Казалось бы, на этом тему можно было и закрыть, но есть одно НО… Вспомним о наших «особенных» друзьях, а именно о браузерах семейства IE. Для внедрения нестандартного шрифта в IE шрифт должен быть в Embedded OpenType (eot) формате.

Это мало не единственный случай, когда особенность IE приносит больше пользы, чем вреда. Дело в том, что eot формат подразумевает:

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

Приняв к сведению выше сказанное, модифицируем наш пример:

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

  1. Гибкость. Настройка и изменение параметров текста не составляет труда.
  2. Скорость. Минимальное число дополнительных файлов для загрузки, не тормозит страницу как такое же количество элементов на js и Flash.
  3. SEO. Текст остался текстом – плюсы очевидны.
  4. Пример работоспособен в браузерах начиная с: IE4, Op, Fx3.5, Cr2, Sa1.
  5. Перед применением шрифта нужно провести его оптимизацию (читайте послесловие).
  6. При использовании покупных шрифтов нужно побеспокоится об их безопасности.
  7. Если пропускная способность канала связи маленькая, то пока не подгрузится файл шрифта, пользователь либо увидит простой шрифт на месте нестандартного, либо не увидит ничего в принципе.

Послесловие.

Оптимизация шрифта

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

В результате таких стараний файлы шрифтов могут перевалить за отметку десятков мб. А нужно ли нам такое разнообразие? Ведь для придания пикантного стилевого оттенка, нам (в зависимости от ситуации) не обязательно нужны знаки препинания, разнообразные символы. По правде говоря, и разные начертания не всегда нужны. Или допустим, вы оптимизируете свой сайт строго под рунет, без латыни можно обойтись…

Ну, суть Вы уже уловили. Шрифт нужно оптимизировать:

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

Как это сделать? На просторах интернета существует целый ряд сервисов, позволяющих выполнить необходимые операции, например: font-face Generator, Online Font Converter, Web Font Optimizer и др.

Защита

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

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

В IE все продумано до нас – защита в формате eot уже встроена. Для всех остальных обозревателей однозначного решения пока нет.

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

Также вы можете просто применить бесплатные шрифты.

@font-face

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

Тип правила

Применяется: в любом количестве, но в каждом правиле @font-face может использоваться только одно свойство font-family и только с одним именем шрифта.

Значения

Значением @font-face является указание заключенного в фигурные скобки < >списка свойств шрифта, таких как: src (для подключения нового шрифта), font-size, font-style, unicode-range и так далее. Но обязательно необходимо указать свойство font-family и задать имя шрифту, чтобы потом можно было на это имя ссылаться.

Синтаксис

Пример CSS: использование @font-face

Результат. Использование правила CSS @font-face.

Браузеры Internet Explorer до версии 8.0 включительно поддерживают описываемое At-правило, но понимают только шрифты формата EOT , который активно продвигается компаниями Microsoft и Adobe, поэтому пример в данных браузерах не будет работать.

@font-face

Поддержка браузерами

Описание

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

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

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

Илон Маск рекомендует:  Как сделать, чтобы в текстовом поле заранее выводился определенный текст
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL