У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило , есть еще варианты использовать Cufon или подгружать шрифты с Google Webfonts или Fontsquirrel, но на Google Webfonts и Fontsquirrel может не оказаться нужно шрифта, поэтому рассмотрим самый оптимальный вариант – подключение уникальных шрифтов с помощью @font-face.

Самый простой способ подключить шрифт – прописать в таблице стилей:

@font-face { font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); } body{ font-family: "PF Din CompPro", Arial, sans-serif; }

Здесь ‘PF Din CompPro’ – название шрифта, и далее вы можете указать этот шрифт для нужных элементов сайта, а fonts/pfdintextcomppro-medium-webfont.ttf – это путь к вашему шрифту, который лежит в папке fonts, важно, чтобы в названии файла шрифтов не было пробелов, лучше замените их на тире.

Это самый простой способ, но вот только работает он не во всех браузерах, и это большая проблема.

Каждый браузер поддерживает свои форматы шрифтов:
TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

Поэтому вам придется из одного своего шрифта в формате.ttf сделать еще несколько таких же шрифтов только в другом формате. Здесь поможет генератор шрифтов на сайте fontsquirrel.com . На этой странице загрузите свой шрифт, выберите настройки Optimal, отметьте чекбокс с подтверждением о легальности загружаемого шрифта (некоторые шрифты стоят очень много денег и у вас должно быть разрешение на их использование), затем нажмите кнопку “Download Your kit” и вы получите нужный архив со всеми форматами своего шрифта.

Из архива скачайте все форматы ваших шрифтов, по идее это 4 файла с расширениями.eot, .svg, .ttf и.woff, эти файлы скопируйте в папку fonts на своем сайте, так же в архиве будет лежать файл stylesheet.css – в нем уже будут прописаны все правила для подключения шрифтов, можете смело скопировать их в свою таблицу стилей, только не забудьте указать свои пути к файлам шрифтов, например, к папке fonts. Пример того, что получилось на одном из моих сайтов:

@font-face { font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype"), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; } body{ font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif; }

С такими параметрами шрифты отображаются в любых браузерах, включая всеми любимый IE-7-8-9.

Если вы используете нестандартные шрифты для кириллицы, т. е. для русских символов, и шрифт неправильно отображается на сайте, тогда возможно поможет генерирование шрифта с расширенными настройками, на странице http://www.fontsquirrel.com/tools/webfont-generator загрузите свой шрифт и выберите настройки “Expert”. Там много настроек, все я не знаю, но внимательно прочитайте и выберите необходимые для вас, а для поддержки кириллицы выберите в блоке Subsetting: раздел Custom Subsetting… и отметьте чекбокс Cyrillic, а так же отметьте нужные для вас языки и форматы.

Пример того, что получилось у меня вот:

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

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

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

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

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

Пути решения

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

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

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

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

@ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ; }

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

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

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

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

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

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

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

@ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular " ) , url(./ AlexBrush- Regular. eot) ; } @ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ; }

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

@ font- face { font- family: " AlexBrush-Regular " ; src: url("AlexBrush-Regular.eot" ) ; src: url("AlexBrush-Regular.eot?#iefix" ) format("embedded-opentype" ) , url("AlexBrush-Regular.svg#JournalRegular" ) format("svg" ) ; url("AlexBrush-Regular.woff" ) format("woff" ) , url("AlexBrush-Regular.otf " ) format("truetype" ) , }

Важно!!!

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

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

От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:

Font-style. Определяет начертание текста. Принимает такие значения:

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

Lighter – буквы получат меньше жирности, по сравнению с родителем.

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту , где все описано более подробно.

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

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

Сокращенная запись

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

Font: font-style | font-variant | font-weight | font-size | font-family;

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

Как задать шрифт в html разным элементам

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

p a{ font-family: Verdana, sans-serif; }

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

Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах. В этой теме мы рассмотрим, как это сделать.

Семейства шрифтов

Шрифты подразделяются на семейства. Существуют такие семейства шрифтов:

serif - с засечками

sans-serif - без засечек

monospace - моноширинные

cursive - курсивные

fantasy - декоративные

Безопасные шрифты

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

Times New Roman, serif

Arial, sans-serif

Verdana, sans-serif

Tahoma, sans-serif

Impact, sans-serif

Trebuchet MS, sans-serif

Courier New, monospace

Comic Sans MS, cursive

Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.

Установка шрифта

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

Стиль:

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

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

Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Чтобы их найти, нужно в поисковике написать - шрифты. Файл шрифта нужно скачать и присоединить к странице. При выборе нужно учитывать, что некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт.

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

Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым этот шрифт будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу нестандартного шрифта. После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта.

Для примера я использую файл шрифта с названием unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont.

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

Зачем нужен font-face?

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

Как подключить нестандартный ttf или otf шрифт в CSS?

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

@font-face { font-family: PT-Sans; /* имя шрифта для CSS правил */ src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */ url(fonts/PT-Sans.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */ }

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

My_customized_font{ /*...*/ font-family: PT-Sans; /*...*/ }

После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.

Нестандартные шрифты средствами HTML и CSS в Internet Explorer.

Ещё один способ подключить нестандартный шрифт в IE

Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:

@font-face { font-family: "PTSans"; src: url("css/fonts/ptsans.eot#") format("eot"), url("css/fonts/ptsans.ttf") format("truetype"); }

Таким образом Internet Explorer загрузит только EOT шрифт, пытаясь загрузить его по ссылке css/fonts/ptsans.eot#’) format…
А другие броузеры без проблем выберут TTF шрифт, и загрузят его.

Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT

Об этом можно писать отдельную статью, потому, что средств сегодня достаточно много, хотя еще несколько лет назад, для этого была только одна программа, разработанная Microsoft под Windows (не доступная для пользователей других ОС).
Особого внимания заслуживает программка fontoptimizer написанная на PERL, и соответственно абсолютно кроссплатформенная.
Надо сказать, что мне доставило огромное удовольствие использоваие этой программы на моем Mac. Программа запускается прямо из терминала и позволяет не только конвертировать шрифты из ttf в eot, но сжимать их, удаляя ненужные биты и байты, и даже удаляя ненужные глифы (символы).
Скачать fontoptimizer можно здесь: fontoptimizer

Для того, чтобы сконвертировать шрифт из ttf в eot с помощью fontoptimizer достаточно вызвать в терминале (или в консоли)

Convert-eot.pl --ttf-to-eot infile.ttf outfile.eot

Оптимизация размера файла шрифта для Web

Файлы шрифтов могут быть достаточно громоздкими. От нескольких сотен килобайт и до нескольких мегабайт. И их размер очень сильно влияет на скорость загрузки сайта. Поэтому логично оптимизировать размер шрифтов. Как? Очень просто:

1. Удалить лишние глифы (символы) из шрифта
2. Удалить лишнюю информацию

Это можно сделать с помощью той же утилиты fontoptimizer.
Всё что тебе понадобится это:

1. Файл с исходным шрифтом
2. Файл с символами, которые должны остаться в файле шрифта в кодировке UTF8

Subset.pl --charsfile chars.txt infile.ttf outfile.ttf

Где chars.txt – файл с набором символов, которые нужно оставить в файле шрифта (файл с символами обязательно должен быть в кодировке UTF8), ну а infile.ttf и outfile.ttf – входящий и выходящий файлы соответственно.
Во время тестирования с помощью fontoptimizer удалось получить из 450Kb-го файла 12Kb-й, что очень ускорило загрузку страницы.

Сервис для автоматического создания font-face, с оптимизацией и конвертацией ttf во все возможные форматы

Если лень делать все ручками, и если это не интересно или просто нет времени, то к твоим услугам отличный сервис, который сам производит оптимизацию шрифтов, конвертирует TTF в EOT, SVG, WOFF и другие форматы, которые можно загружать через font-face, и на выходе выдает архив со всеми файлами, и полностью прописанными правилами font-face для твоего шрифта. Разве не здорово?
Сервис доступен по адресу: www.fontsquirrel.com
Думаю в настройках ты разберешься:)

О недостатках

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

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