Нестандартные шрифты
Google Web Fonts
Используем сервис Google для кроссбраузерного подключения нестандартных шрифтов на страницу.
Сначала находим те шрифты от Google, которые будем использовать в проекте.
Далее включаем нужные нам опции(так называемая кастомизация шрифта):
Начертание шрифта или шрифтов(тонкие, жирные, курсив)
Семейство шрифта по умолчанию только латинское, так что добавляем в набор нужный нам язык.
Теперь мы готовы подключать шрифт на страницу, для этого google предоставляет два способа:
Предпочтительнее первый вариант подключения.
Копируем код и вставляем его в секцию head html файла.
Обычно используется как минимум 2 разных шрифта. Подключать их нужно одной ссылкой а не несколькими.
В основном css файле нужно указать используемый шрифт от Google:
ВАЖНО! Если отсутствует нужное нам семейство языка, то нужно рассмотреть возможность замены используемого шрифта на похожий имеющий нужный язык, в противном случае, за неимением таковых либо настойчивому желанию заказчика использовать именно такой, рассмотреть возможность подключения используя свойство @font-face
пример использования Google Web font - link
@font-face Web fonts
На данный момент, свойство @font-face поддерживается большинством браузеров(~95%)
Для работы в данном случае нам потребуется сконвертировать шрифт, поэтому заказчик должен предоставить файл шрифта для каждого из его начертаний желательно в формате .ttf.
Конвертация шрифта
Наиболее оптимальным, для конвертации шрифтов во все форматы сразу, является сервис @font-face Kit Generator (позволяет сгенерировать архив содержащий шрифты EOT, SVG и даже WOFF). Также вы получите еще и готовый пример HTML+CSS для вставки шрифта на веб страницу, а также возможность некоторой оптимизации на этапе конвертации (разложение шрифта, очистка обводов, автокоррекция глифов).
Данный сервис позволяет загрузить более одного шрифта и сразу (одновременно) сгенерировать необходимые форматы для всех загруженых шрифтов (удобно если в проекте использется несколько различных шрифтов).
Внедрение шрифта
По спецификации, подключение шрифта с помощью font-face выглядит так:
Важно: определять @font-face желательно в начале css файла.
А использование так:
Далее представлен наиболее оптимальный кроссбраузерный код внедрения шрифта на страницу через свойство @font-face, предложенный Полом Айришем (Paul Irish).
Первым делом мы объявляем семейство шрифтов GaramondPremierProSemiboldIta. Затем указываем источник со шрифтом в формате EOT для браузеров IE. Далее мы обращаемся к остальным браузерам с запросом на наличие локально установленного шрифта, если таковой отсутствует, браузеру предлагается его скачать. WOFF мы предлагаем для Firefox 3.6+, SVG для Opera 9.x и iPhone, а OTF для всех остальных браузеров.
Затем мы просто указываем семейство GaramondPremierProSemiboldIta для любого блока нашего документа или всей страницы в целом:
Использование свойств font-style, font-weight и их комбинаций
Единственно правильным и работоспособным, в поддерживаемых браузерах, способом использовать различные начертания для шрифта, является генерация отдельных форматов шрифтов и, соответственно, отдельной записи font-face.
Второй пример показывает как необходимо объявлять наклонный тип шрифта. Естественно, что перед этим наклонный тип шрифта должен быть сгенерирован
Использовать наклонный тип шрифта следует так:
Таким же образом можно использовать все остальные типы шрифтов (Bold, Medium, Black и др.). Всего же @font-face позволял указывать до 8-ми различных начертаний шрифта
Замечания
Одной из причин неработающего font-face в Opera или IE может быть слишком длинный путь к файлу шрифта, наличие русских букв в названиях папок/файлов или подключение в хтмл отсутствующего либо пустого файла.
При неправильном отображении арабских символов в разных браузерах пробуем сгенерировать шрифт другим конвертором и методом подбора находим рабочий шрифт. Например, формат .eot с одного генератора отображается, а со второго нет.
В @font-face нельзя прописывать font-weight, font-style.
Так как обычно шрифты имеют очень большой объем, целесообразно при генерации отмечать только те символы (таблицы Unicode), которые будут использоваться на сайте (нужно узнавать у клиента).
////
Полезные ссылки
http://www.fontsquirrel.com/ https://fonts.google.com/ https://developers.google.com/fonts/docs/getting_started
////
Last updated