Встраиваем шрифты при помощи Font Squirrel @font-face Generator


Содержание

Правило @Font-Face и несколько уловок для работы с Web шрифтами

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

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

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

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, и это далеко не всё. Наверное легче найти путь из джунглей, чем шрифт, который вам 100% подойдёт. Давайте взглянем на плюсы и минусы интеграции шрифтов.

TrueType

Этот формат был создан в далёком 1980 году в конкурсе Adobe’s Type 1 для PostScript. Этот формат, основанный на новых технологиях, заменил множество других, которые использовались к этому времени. Microsoft начал использовать формат TrueType, и вскоре он стал стандартным системным шрифтом.

OpenType

Когда-то давно Microsoft и Adobe объединились, чтобы создать данный формат. Как ни странно, но он основан на формате TrueType, но в него встроены дополнительные элементы, такие как лигатуры, контекстные символы и т.д. Однако многие браузеры до сих пор не поддерживают данный формат. Существует две разные версии формата OpenType, основанные на разных технологиях. Если поподробнее то вот:

  • OpenType с контурами TrueType (OpenType TT) и
  • OpenType с контурами PostScript (OpenType PS)

Шрифты, основанные на формате TrueType больше подходят для Web, и будет вообще клёво, если Microsoft решит все проблемы связанные с отображением. Структуры шрифтов TrueType и OpenType fonts очень схожи и поддерживаются в Safari 3.1 и выше, Firefox 3.5 и Opera 10 (и в новых версиях).

Internet Explorer поддерживает формат (EOT) начиная с 1990 года. В отличии от форматов TrueType и OpenType, он предоставляет следующие возможности:

  • Шрифты EOT более компактны, чем OpenType, что является значительным преимуществом для Web.
  • Шрифты EOT могут использоваться только в пределах домена. Это очень удобная вещь, т.к. помогает бороться за лицензированные права на шрифты.

Если вы хотите сконвертировать шрифт TTF в файл EOT, то можете воспользоваться инструментом EOTFast (бесплатный), доступный только для пользователей Windows.

В отличии от EOT, формат WOFF отрекомендован знакомой вам организацией W3C, которая опубликовала первую версию WOFF в июле 2010.

На самом деле формат WOFF это новое скрещивание форматов TrueType и OpenType, что по сути не делает его новым.

WOFF использует алгоритм, который называется zlib, что позволяет значительно уменьшить вес файла, примерно на 40%. Более того, в этот шрифт можно добавлять мета данные, такие как лицензию и т.д. Однако такие данные не могут валидироваться браузерами.

Данный формат поддерживается браузером Firefox, начиная с версии 3.6, и Google Chrome, начиная с версии 5.0. Все остальные браузеры на данный момент производят все необходимые изменения для поддержки данного формата.

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

SVG шрифты — это не очень хорошая альтернатива для Web шрифтов, и iOS 4.2 — это первая версия Mobile Safari, которая поддерживает данный формат. Однако, данный формат является единственным, который вы можете использовать для iPhone и iPad, которые работают на iOS 4.2.

Инструмент Font Squirrel, может быть использован для конвертирования из одного формата в другой.

@font-face Революция

Свойство CSS3 @font-face предоставляет множество новых возможностей для Web дизайнеров.

Что касается типографии, Web находится далеко позади печати. К примеру: в печати, более «сгущённые» шрифты часто применяются для того, чтобы уместить больше символов на одной строке. Системные коллекции шрифтов, как правило содержат «конденсированные шрифты». К тому же различные компании не могут использовать собственные шрифты на своих сайтах. Вместо этого им приходится заменять их на стандартные шрифты, такие как Arial, которые настолько приелись, что это уже невозможно.

@font-face В далёком 1990

Идея использования любых шрифтов в вебе не так уж и нова. Netscape 4 и Internet Explorer 4 поддерживали @font-face ещё в начале 1990 года. Данное правило позволяет загрузить нужный нам шрифт на сервер и использовать его на Web странице следующим образом:

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

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

Со временем многие разработчики начали использовать векторные элементы, которые создаются средствами JavaScript. Typeface.js и Cufón предоставляют данную функциональность. Каждая из этих техник не совместима с поисковой оптимизацией и масштабированием.

Вторая попытка

Запуск Safari 3.1 от Apple дал новый старт Web шрифтам. Правило @font-face было немного обновлено. Данное изменение было введено из-за внедрения LCD мониторов, которые имеют высокое разрешение.

На платформах Mac OS X, данная функциональность активирована по умолчанию. Пользователям Windows она доступна через ClearType, который поддерживается в Windows Vista и Windows 7, но не в Windows XP. В Microsoft Office 2007 и 2010, Internet Explorer 7+ и Windows Live Messenger, ClearType включён по умолчанию вне зависимости от операционной системы.

Используем шрифты следующим образом:

Возникшие проблемы

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

Использование @font face Kit Generator

Для практического тестирования, вы можете скачать пакет на Graublau Sans Web. Этот пакет шрифтов содержит шрифты OpenType, основанные на PostScript, которые поддерживаются в Safari 3.1+, Firefox 3.5+ и Opera 10+. Для того чтобы добиться такого же функционала в Internet Explorer и исправить все недочёты отображения, вы можете воспользоваться @font-face Kit Generator. Кликните на кнопку “Add Fonts” и загрузите шрифт, который хотите использовать. Затем выберите пункт “Expert” для проверки необходимых опций, о которых мы поговорим подробнее:

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

Вся проблема в том, что вам необходимо активировать поддержку EOT для работы @font-face в Internet Explorer IE4 — IE8 (в IE9 RC, WOFF уже поддерживается). Шрифты SVG вам понадобятся только для Mobile Safari, которое стоит на iPhone и iPad iOS 4.2. Chrome и Opera с этим форматом знакомы. В качестве альтернативы SVG, вы можете использовать сжатую версию SVGZ, которая занимает намного меньше места. Однако она не поддерживается на iPhone, так что вам по любому придётся работать с SVG.

Создание формата TrueType активирует поддержку в Safari (начиная с версии 3.1), Firefox (3.5) и Opera (10). В будущем WOFF грозится стать стандартным форматом для Web шрифтов.

Рендеринг и прочие параметры

  • Add Hinting: эта опция предназначена для улучшения отображения на Windows. Вы можете отключить её, если шрифты уже оптимизированы.
  • WebOnly™ добавляет специфические модификации, которые позволяют браузерам использовать данные шрифты, но исключают установку шрифтов на операционную систему. Выбор этого параметра предотвращает нарушение авторских прав.
  • Keep OT Features: шрифты OpenType могут хранить в себе ряд функций. Однако данные функции почти не поддерживаются современными браузерами.
  • Remove Kerning: эта ещё одна возможность уменьшить размер файла. В том случае, если вы будете использовать данный шрифт внутри тега body, очень рекомендую выбрать данную опцию.
  • Simplify Outlines: эта опция уменьшает качество отображения элементов шрифта.
  • Build Cufón File — это не традиционная часть внедрения @font-face.

Дополнительные настройки

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

Опция Basic Subsetting стоит по умолчанию для восточных Европейцев, которые используют шрифты основанные на MacRoman. Custom Subsetting позволяют пользователю определить, какие символы он будет использовать в файле. Если опция No Subsetting деактивирована, то шрифт просто сконвертируется в том виде, в котором он есть.

CSS-форматы

Вы можете выбрать три разные версии:

Fontspring syntax — это, возможно, самый простой вариант. Он может передать файл WOFF в IE9 и EOT в более раннюю версию IE. Он также будет работать на мобильных версиях браузеров и операционках, таких как iOS и Android.

CSS Опции

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

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

Последняя по списку, но не по значению, — опция Base64 Encode, которая позволяет шрифту быть закодированным согласно base64. В результате, шрифт не появится как файл в пользовательском кэше.

Пример кода

Данный код является примером использования CSS для внедрения @font-face:

Первые строки предназначены для браузеров IE9 и IE7 & IE8. А вот далее, EOT для Internet Explorer сопровождается вопросительным знаком. Это специальный приём применяется, чтобы сбить с толку IE для того, чтобы последующий текст он не принимал всерьёз.

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

Уменьшаем время загрузки страницы с большим количеством шрифтов

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


Временное решение в Firefox

Большинство браузеров не отображают текст страницы до тех пор, пока шрифты полностью не импортированы. Однако Firefox отображает фон в обычном шрифте, потом снова его рендерит после того, как шрифт до конца загрузился. Зачастую данная техника приводит к нежелательному слайд эффекту. Web дизайнеры могут контролировать данный процесс благодаря Google Webfont Loader.

Встраивание шрифтов с вашего сервера

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

Этому шрифту — да, этому — нет

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

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

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

Встраивание бесплатных шрифтов

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

Ещё одна огромнейшая коллекция находится на ресурсе Font Squirrel. Тут вы можете скачать целый набор шрифтов, которые в последствии необходимо будет сконвертировать благодаря @font-face Kit Generator.

Перед тем как скачать шрифт, убедитесь в том, что шрифт может быть сконвертирован для веба!

Советы и рекомендации

Сама идея использования различных шрифтов на веб страницах начала бурно развиваться последние два года. О таких темпах развития можно только мечтать. Однако до сих пор разработчикам приходится сталкивать с множеством проблем кроссбраузерного отображения. Все эти проблемы решатся, когда Web Open Font Format (WOFF) будет признан сообществом разработчиков как стандарт.

Илон Маск рекомендует:  Изменение цвета фона, текста и ссылок

Другим препятствием, которое уже упоминалось ранее, является распространенность операционной системы Windows, в которой субпиксельный рендеринг отключен (либо по умолчанию в Windows XP или по предпочтению со стороны пользователя). По сравнению с системными шрифтами, большинство веб-шрифтов отображаются в низком качестве, из-за отсутствия субпиксельного рендеринга. Конечно же, со временем данная проблема будет решена, так как пользователи заменят старое оборудование и операционные системы. В то же время, Internet Explorer 9 работает с текстом процессором DirectWrite, что обеспечивает значительно более совершенную обработку.

Использование веб-шрифтов в вашем дизайне требует тщательного тестирования, так как на различных браузерах и платформах результат может быть прямо противоположный. Если экран имеет низкое разрешение, и отсутствует поддержка субпиксельного рендеринга, то отображение будет искажено или будет вовсе отсутствовать. Самый простой способ решения данной проблемы — это чтобы все сменили железо и операционки! Но этого же не будет) Конечно, вы можете использовать JavaScript, для того чтобы узнать о поддержке субпиксельного рендеринга.

Отображение текста

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

Но это дело можно подправить при помощи JavaScript client-side hyphenation, который был разработан phpHyphenator. Но и с этим инструментом могут возникнуть проблемы интеграции в браузере, но в будущем, думаю, и это будет решено.

Фишки OpenType

Тут есть и обратная сторона медали. Дело в том, что такие программы как InDesign и QuarkXPress 7+, не поддерживают типографических стандартов OpenType.

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

Некоторые шрифты могут быть использованы только при наличии поддержки OpenType. Всеобъемлющей OpenType может содержать глифы и другие элементы. С помощью функции OpenType, базовая версия будет заменена версией с соответствующими элементам, которые поддерживаются в софтине. Пример на рисунке:

Недавно вышедший Firefox 4 поддерживает все вышеперечисленные фишки OpenType. Теперь вы можете пользоваться данными преимуществами следующим образом:

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

Надеемся, эта статья была для вас познавательна! В скором времени все эти проблемы навряд ли решатся. Нам остаётся только ждать.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/
Перевел: Станислав Протасевич
Урок создан: 28 Апреля 2011
Просмотров: 90870
Правила перепечатки

5 последних уроков рубрики «Для сайта»

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

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

45+ бесплатных материалов для веб дизайнеров за август 2020

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Modern and simple css @font-face generator

The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

Usage: click the Add font(s) button, select the TTF, OTF, WOFF, WOFF2 or SVG fonts on your computer and click Convert. Download zip archive with converted fonts, css styles and demo page. That’s all!

Подключение веб-шрифтов с помощью @font-face

February 24, 2014

Выжимка из замечательной книги “Большая книга CSS3 3-е издание” Дэвида Макфарланда о веб-шрифтах и способе их подключения с помощью директивы .

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

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

Подключение веб-шрифтов с помощью @font-face:

  • подключение нестандартного шрифта с помощью директивы
  • назначение подключенного шрифта с помощью свойства

Директива указывает (название говорит само за себя — директива!) браузеру сделать две вещи:

  • создать указываемое имя шрифта
  • загрузить глифы для шрифта из указанного ею места

Свойство указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически — это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) — это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

Формат SVG — это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть — математических формул.

Благодаря этому изображения в таком формате масштабируются без потери качества — при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт — это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов — “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

  • можно использовать в Веб
  • нельзя использовать в Веб


Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

Единственное ограничение этого сервиса — он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

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

  • EOT — формат только для Internet Explorer 8 и ниже
  • WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
  • TTF — сравнительно большой по размеру шрифт и достаточно устаревший
  • SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

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

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.

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

Виды шрифтов

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

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь — попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название . В этом случае браузер просто тупо выполняет наклон всех букв шрифта на 45 градусов, и все. Получившийся результат может быть просто ужасным, поэтому такая команда используется очень редко.

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

Простой способ подключения веб-шрифта

Простой способ заключает в добавлении к директиве двух CSS-правил: и . Обычно эти два правила задают браузеру команды отображать текст полужирным и курсивным начертанием. Но внутри директивы эти правила выполняют другую роль, они заставляют браузер загрузить веб-шрифт с указанным стилем и жирностью. Чтобы быть более понятным, приведем сразу пример подключения веб-шрифта PTSans с четырьмя вариантами его отображения:

Расскажу, как я понимаю данные CSS-правила. Директива является своего рода функцией наподобие функции в JavaScript (а может это и есть функция на самом деле, уж больно похожа по своему функционалу?). Эта функция (я буду называть так здесь эту директиву) объявляет имя переменной правилом . Эта переменная является массивом, который заполняется значениями с помощью последующих правил:

  • — местоположение шрифта;
  • — загрузить шрифт указанной жирности;
  • — загрузить шрифт указанного стиля.

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

И затем HTML-тегами или указать, какое начертание шрифта применить к указанным элементам:

Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.

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

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

Сложный способ подключения веб-шрифта

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

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

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

Выходом из положения будет применение различных имен шрифта в директиве . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:

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

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам , , ссылке ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?

Применять или не применять второй способ подключения веб-шрифтов — это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Шрифты Google Fonts

Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив , можно воспользоваться сервисом Google Fonts. Преимущество этого способа заключается в простоте способа и его надежности — достаточно получить на сервере Google одну строку ссылки и поместить ее в свой проект.

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

Первый способ прост, но имеет один недостаток — тег нужно будет подключать к каждой из разрабатываемых HTML-страниц проекта.

В тоже время, второй способ с помощью директивы более лаконичный — достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.

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

В Google плотность шрифта обозначается не с помощью ключевых слов , или , а в числовой шкале — 100 до 900. Значение 400 соответствует , 700 — .

К примеру, код может выглядеть следующим образом. Зададим для элемента шрифт Gentium Book Basic нормальной плотности курсивного начертания:

На этом выжимка по веб-шрифтам заканчивается.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Sergey Smirnov

Довольно часто в клиентской части кода требуется использовать не системные шрифты. Системными (или иначе безопасными шрифтами web-safe fonts) на сегодня являются шрифты установленные в операционной системе. К web-safe fonts относятся такие шрифты как: Arial, Helvetica, Tahoma, Trebushet MS, Verdana, Times New Roman и некоторые другие семейства шрифтов.

Посмотреть полный список web-safe fonts можно на сайте http://www.cssfontstack.com/

Итак, вам присылают макет сайта, а там основным шрифтом заголовков взят Miryad Pro и задача поставлена таким образом, что на выходе шрифт должен отображаться 1 в 1 как на макете. Вы начинаете разбираться как же вам использовать этот шрифт в своей таблице стилей?

В классическом виде, в css, выбор семейства шрифта производится таким правилом

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

А теперь давайте вернемся к гарнитуре Myriad Pro и разберемся что это такое.

Myriad — семейство шрифтов класса гуманистический гротеск, разработанное Робертом Слимбахом и Кэрол Туомбли для Adobe Systems.

Шрифты Myriad Pro устанавливаются на компьютер вместе с популярной программой просмотра файлов формата PDF Adobe Reader версий 7.0 и 8.x. Этим обусловлено их широкое распространение в последние годы.

Данный шрифт используется компанией Apple в выпускаемых устройствах.

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

А теперь давайте бегло прикинем сколько ваших пользователей пользуются программами Apple и софтом от Apple? Много, но не все. Я не рискну оценивать процент пользователей с установленным шрифтом Myriad Pro, просто скажу вам, что его нет в web safe-fonts и веб-безопасным этот шрифт не является.

Что же это означает на практике? На практике это означает то, что у тех пользователей, у которых шрифт семейства Myriad отсутствует в операционной системе, в браузере будет отображена сначала первая альтернатива, потом вторая альтернатива, а потом стандартный шрифт браузера типа sans-serif, в соответствии с нашими правилами.

Таким образом компьютеры операционной системы Windows без установленного программного обеспечения от Adobe просто отобразят все гарнитурой Arial. А это не есть хорошо.

И как же нам быть? Ведь у нас стоит условие сделать шрифт 1 в 1 как на макете! Спокойствие, только спокойствие!

Кроссбраузерный @font-face. Генераторы

У вас есть 2 варианта решить эту задачу.

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

Разница между cIFR и cufon в том, что первый требует наличия Flash плагина, которого по-умолчанию нет в Apple устройствах. Поэтому лучше использовать второй вариант в виде cufon если вы решили действовать этим методом.

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

Для Myriad Pro готовые решения в формате cufon можно взять по этой ссылке http://www.cufonfonts.com/ru/font/492/myriad-pro

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


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

На стороне сервера происходит конвертация otf или ttf в шрифты следующих форматов

Web Open Font Format (WOFF) — формат сжатого шрифта OpenType или TrueType и полностью совпадает с оригиналом, что позволяет оставить неизменным механизм рендеринга

Embedded OpenType (EOT, внедряемый OpenType) — компактный формат внедряемых в веб страницы OpenType шрифтов разработанный Microsoft. Файлы таких шрифтов обычно имеют расширение « .eot »

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

Вот несколько популярных сервисов которые позволят вам конвертировать ваш ttf или otf шрифт в форматы eot, woff и svg, что делает возможным кросс-браузерную генерацию css кода @font-face

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

Наиболее популярным решением является конвертер http://www.fontsquirrel.com/tools/webfont-generator но в случае с гарнитурой Myriad Pro этот популярный конвертер не справляется.

В момент преобразования вы встретите следующую ошибку

Поэтому для конвертации воспользуемся любым другим конвертером, я выбрал http://everythingfonts.com/font-face

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

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

Часто, в русскоязычных блогах и сообществах можно встретить добавление следующего кода src: local(‘☺’) это один из хаков, который уменьшает возможность загрузки шрифта из локальной Library на Mac устройствах.

В результате вы получаете решение, работающее в следующих браузерах. И это не графика, а шрифты, что не может не радовать! :-)

@font-face with data URIs and Font Squirrel’s @font-face generator

I am developing a JavaScript application for modern browsers and I don’t need to support older ones. I want to embed the fonts in my CSS file instead of loading them.

For all the browsers that I want to support, I just need the WOFF and TTF fonts.

Now when I use the Font Squirrel’s @font-face generator, with «base64 encode» — it only gives me the data URI for WOFF type and NOT for the TTF type.

Why does it do it?

1 Answer 1

I believe the reason is to minimize overall file size / load time.

Some devices have a 25kb limit in order to maintain files «cached». When the TTF and the WOOF are base64’d the CSS file can exceed the limits and cause a reload each visit.

Browsers will use the first font «it can» (or «cascade» if you will). You will see the formats listed in the following order for specific reasons:

1. EOT — used to catch older IE (

Not the answer you’re looking for? Browse other questions tagged webfonts or ask your own question.

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.9.35389

font-face generator

@font-face

The fastest, easiest and the simplest @font-face generator in the world. Convert your fonts to webfonts in a blink.

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. Unfortunately different browsers understand differnt font types. This service allows you to generate css rule and font files that makes your font work in all the browsers that support font-face or webfonts.

@font-face

Internet Explorer(all) Safari(3.2+) iPhone(3.1) Chrome(all) Firefox(3.5+) Opera
EOT TTF / OTF SVG SVG / TTF / OTF TTF / OTF / WOFF TTF / OTF

Upgrade your experience

Currently your file size limit is 0.1 MB. For verified users the limit is 2 MB. For unregistered guest users the limit is 0.4 MB. For unverified registered users the limit is 0.5MB. If you want more than these size limits consider upgrading your file size.

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 и вставьте их в свой файл стилей (только без тегов «»).

Илон Маск рекомендует:  Iindex найти литеру в строке

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

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

Еще сервисы 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:

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

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

@font-face с URI данных и Font Squirrels @font-face generator

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

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

Теперь, когда я использую генератор шрифтов Font Squirrels @font-face, с «base64 encode» — он дает мне только URI данных для типа WOFF и NOT для типа TTF.

Почему он это делает?

Я считаю, что причина заключается в том, чтобы свести к минимуму общий размер файла/время загрузки.

Некоторые устройства имеют ограничение в 25 килобайт, чтобы поддерживать «кэширование» файлов. Когда TTF и WOOF имеют base64, файл CSS может превышать лимиты и вызывать перезагрузку каждого посещения.

Браузеры будут использовать первый шрифт «он может» (или «каскад», если хотите). Вы увидите форматы, перечисленные в следующем порядке, по определенным причинам:

1. EOT — используется для улавливания более старого IE (

Блог 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, но к сожалению, он пока не может похвастаться полной поддержкой в браузерах.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL