Шрифт на сайт

Шрифт на сайт

От автора: Thierry Blancpain – бренд-дизайнер, работает в Informal Inquiry в Нью-Йорке, является сооснователем Grilli Type, семейсива шрифта Swiss. Статья применима ко всем веб-шрифтам, однако в качестве примеров концепций используются шрифты Grilli Type, в частности те, которые демонстрируют функции OpenType.

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

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

При покупке лицензии на шрифт вы получаете пакет файлов шрифтов, который обычно включает, как минимум, следующие форматы:

Embedded OpenType (EOT): EOT – старый формат, разработанный Microsoft. EOT необходим для рендера шрифтов в старых версиях IE. EOT часто предоставляют в несжатом виде, поэтому если вам не нужно поддерживать IE8 и ниже, то лучше отказаться от этого формата.

TrueType (TTF): TTF – формат шрифта, разработанный Microsoft и Apple в 1980-х. Современные файлы TTF также называют TrueType OpenType шрифты. TTF полезен для расширения поддержки старых браузеров, особенно мобильных при необходимости.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Web Open Font Format (WOFF): WOFF разработан в 2009 – это формат-обертка для шрифтов TrueType и OpenType. Формат сжимает файлы и поддерживается во всех современных браузерах.

Web Open Font Format 2 (WOFF2): WOFF2 – обновление оригинального формата WOFF. Разработан Google и считается лучшим форматом из предложенных, так как обеспечивает меньший размер файлов и лучшую производительность в современных браузерах с поддержкой.

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

Если хотите максимально расширить поддержку, добавьте файлы EOT и TTF. Также для расширения поддержки браузеров обычно используют SVG шрифты, но на сайте Grilli Type мы больше не используем SVG шрифты, так как у них есть минусы. Google Chrome, например, полностью удалил их поддержку.

Вставляемые веб-шрифты

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

Если необходимо поддерживать только современные браузеры, можно урезать код:

После объявления шрифтов их можно использовать на элементах. Например:

1 2 3 body { font-family: ‘FontName’, Helvetica, Arial, sans-serif; }

Хостинг веб-шрифтов

Один из самых гибких способов загружать веб-шрифты – это хранить их самому. То есть вы храните файлы на своем сервере, и шрифты всегда будут доступны пользователям на сайте без сторонних зависимостей. Для загрузки своих шрифтов не нужны трек-коды и JS. Множество небольших сайтов-производителей шрифтов дают прямую ссылку на загрузку, что позволяет самим хранить файлы. Мы в Grilli Type считаем это лучшим способом доставки шрифтов.

Пока некоторые производители шрифтов предлагают самостоятельный хостинг (как с большими ограничениями и требованиями, так и без), другие дают только свой хостинг. То есть они сами будут хостить файлы от вашего имени. Среди таких сайтов можно выделить Hoefler & Co., Font Bureau и Typotheque. Font Bureau и Typotheque предлагают свои шрифты в обоих вариантах по разным ценам.

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

Продвинутые функции типографики

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

Интервал и кернинг

В файлах есть 2 настройки, отвечающие за расстояние между символами:

letter-spacing: боковые отступы слева и справа от каждого символа

font-kerning: особая настройка между двумя символами

Интервал нельзя полностью отключить. В таком случае движок рендера текста (браузер) не будет знать, что делать с буквами. Кернинг же по умолчанию выключен и включается вручную в CSS.

Контролировать кернинг легче, чем вы думаете! Как активировать кернинг во всхе браузерах с поддержкой:

1 2 3 4 p { font-feature-settings: «kern» 1; font-kerning: normal; }

Если вы не используете Autoprefixer, то вам придется вручную писать вендорные префиксы для поддержки в старых версиях:

Продвинутые функции OpenType

Мы обсудили, как с помощью атрибута font-feature-settings контролировать кернинг, но с его помощью можно контролировать другие OpenType функции. Список поддерживаемых функций постоянно растет. Возможности OpenType удобно смотреть через CSS-Tricks almanac.

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

Для демонстрации соединения продвинутых функций OpenType представляю вам код ниже. Код включает числовые символы с поддержкой OpenType, старых цифр (onum) и пропорциональных цифр (pnum). Также шрифт включает кернинг и особый стилистический набор.

1 2 3 .my-element { font-feature-settings: «onum» 1, «pnum» 1, «kern» 1, «ss01» 1; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

С помощью атрибута font-feature-settings можно активировать стилистические альтернативы, дискреционные лигатуры, разные типы фигур, маленькие заглавные буквы и другие полезные вещи. На Typofonderie есть замечательный обзор продвинутых функций с примерами.

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

Отступы между букв и слов

CSS уже давно поддерживает letter-spacing и word-spacing. При правильном использовании оба атрибута позволяют хорошо контролировать 2 важных аспекта внешнего вида шрифта.

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

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

Я выяснил, что letter-spacing и word-spacing лучше всего работают с em единицами. Это позволяет отступам гибко подстраиваться на основе размера шрифта на элементе, к которому он применен. Следующий пример даст тексту немного больше места на маленьких размерах шрифта:

1 2 3 4 5 p { font-size: 12px; letter-spacing: 0.015em; word-spacing: 0.001em; }

Рендер шрифтов

Использование шрифтов на экране поднимает важные вопросы о том, как происходит их рендер. Обычно шрифты проектируют под сетку 1000 units tall или выше, но отображают в размере около 16px. При взаимодействии устройства, экрана и ПО такое сокращение разрешения и точности требует некоторых умений, чтобы улучшить читаемость маленького шрифта. Будьте наблюдательны, тестируйте лучшее решение в нескольких браузерах, чтобы использовать лучшие методы для улучшения читаемости.

Хинтинг

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

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

Хинтинг – очень сложная тема. Важно понять, что один и тот же шрифт на одном размере может рендериться по-разному, даже на том же ПК. Все зависит от множества факторов, в том числе экрана, браузера и даже шрифта и цвета фона.

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

Сглаживание шрифтов

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

1 2 3 4 p { -webkit-font-smoothing: antialiased; /* Chrome, Safari */ -moz-osx-font-smoothing: grayscale; /* Firefox */ }

Эти свойства CSS сделают текст еще точнее и тоньше на MacOS и iOS. Однако это может привести к проблемам с рендером, особенно если шрифт уже был тонкий или жирный.

antialiased и grayscale полезны для баланса рендера шрифтов при использовании светлого текста на темном фоне. Без них текст был бы более жирным.

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

Внимание: OptimizeLegibility

Мы часто встречаем этот атрибут при отладки шрифта на сайтах клиентов Grilli Type:

1 2 3 p { text-rendering: optimizeLegibility; }

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

У данного значения есть способы применения, но не используйте его, если не уверены. Скорее всего, оно вам не нужно.

Продвинутые возможности веб-шрифтов

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

Загрузка лицензионных шрифтов на Github

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

1 2 .DS_Store path/to/web/fonts/folder/*

Тактики загрузки шрифтов

Загрузка веб-шрифтов может быть такой же легкой, как @font-face, но не факт, что производительность будет наилучшей. Например, это может привести к миганию нестилизованного текста (МНТ), что считается плохим UX в некоторых случаях. Статья Zach Leat «полное руководство по стратегиям загрузки шрифтов» рассказывает об этом и предлагает методы по улучшению загрузки, которые осчастливят ваших пользователей и вас.

Файлы шрифтов с кодировкой Base64

В некоторых редких случаях удобно кодировать шрифты в base64 через CSS. Но почти всегда это не нужно. В процессе кодирования можно нарушить лицензионные соглашения. При использовании base64 внимательно прочтите правила использования шрифта.

Декорация текста через CSS

W3C работает на черновиком новых элементов для декорации текста. В основном, это связано с тем, как сделать подчеркнутый текст лучше и легче в CSS. Пока что это не работает во всех браузерах, но вы посмотрите!

Переменные шрифты

В 2017 вышла OpenType спецификация шрифтов 1.8.2, что открыло дорогу переменным шрифтам. Новая версия OpenType позволяет включать множество стилей шрифта в один файл, снижая количество запросов на сервер и размер файла. В зависимости от выбора дизайнера шрифт также может допускать использование произвольной жирности между существующей жирностью и шириной шрифта. На Axis Praxis можно поиграться с существующими тестовыми шрифтами – понадобится последняя версия Safari или Chrome.

Заключение

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

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

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

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам <h1>. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

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

  • Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
  • Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+

Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5CSS3IE 8IE 9+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Шрифт</title> <style> @font-face { font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } h1 { font-family: Pompadur, ‘Comic Sans MS’, cursive; } </style> </head> <body> <h1>Современный элемент политического процесса</h1> <p>По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.</p> </body> </html>

Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src. Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1, как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

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

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src. Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url, указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

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

Пример 2. Подключение EOT

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Шрифт</title> <style> @font-face { font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.eot); /* Для IE5-8 */ src: local(pompadur), url(fonts/pompadur.ttf); /* Для остальных браузеров */ } h1 { font-family: Pompadur, ‘Comic Sans MS’, cursive; } </style> </head> <body> <h1>Современный элемент политического процесса</h1> <p>По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.</p> </body> </html>

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

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент <link>. Строка будет иметь примерно следующий вид.

<link href=’http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic’ rel=’stylesheet’ type=’text/css’>

2. Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

  • Шрифты свободны для использования, вам не нужно за них платить.
  • Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
  • Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

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

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

Кроссбраузерные шрифты

Современный дизайн часто требует использования на сайте нестандартных шрифтов. Есть несколько основных способов сделать это кроссбраузерно (отображаться одинаково в разных браузерах):
1) Для небольшого по объему статичного текста, например в логотипе, навигационном меню и других элементах сайта, лучше всего использовать картинки, если это не противоречит интересам сео. В таком случае шрифт гарантированно будет выглядеть одинаково в любом браузере (возможны лишь проблемы с полупрозрачными картинками в формате PNG для некоторых браузеров).
2) Для небольшого количества динамического текста, например в меню или на скидочном купоне, возможны несколько вариантов. Для отрисовки текста поверх картинки чаще всего используется php библиотека gd:

imagettftext($im, $size, $angle, $imgX, $imgY, $color, $font, $imgText); /* * $im — ресурс изображения; * $size — размер шрифта; * $angle — угол поворота в градусах; * $imgX, $imgY — координаты для первой буквы текста; * $color — индекс цвета, * $font — ссылка на шрифт в формате ttf; * $imgText — текст надписи; */

Для случаев, когда не требуется «вшивать» текст в картинку можно использовать одну из javascript библиотек: sIFR, cufon, typefaces.js (основные отличия библиотек: sIFR — использует flash, cufon, typefaces.js — используются JavaScript, SVG и или VML для IE). Способ предоставляет неплохое кроссбраузерное решение, но не стоит использовать его для форматирования больших объемов текста. 3) Для больших объемов текста лучше всего подходят подключаемые шрифты — css правило @font-face. Метод работает для большинства браузеров (в т.ч. IE 6+). Рассмотрим пример подключения шрифта pt sans для сайта:

@font-face { font-family: ‘pt_sans’; src: url(‘fonts/PTS76F-webfont.eot’); src: url(‘fonts/PTS76F-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/PTS76F-webfont.woff’) format(‘woff’), url(‘fonts/PTS76F-webfont.ttf’) format(‘truetype’), url(‘fonts/PTS76F-webfont.svg#pt_sansbold_italic’) format(‘svg’); font-weight: bold; font-style: italic; } @font-face { font-family: ‘pt_sans’; src: url(‘fonts/PTS56F-webfont.eot’); src: url(‘fonts/PTS56F-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/PTS56F-webfont.woff’) format(‘woff’), url(‘fonts/PTS56F-webfont.ttf’) format(‘truetype’), url(‘fonts/PTS56F-webfont.svg#pt_sansitalic’) format(‘svg’); font-weight: normal; font-style: italic; } @font-face { font-family: ‘pt_sans’; src: url(‘fonts/PTS55F-webfont.eot’); src: url(‘fonts/PTS55F-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/PTS55F-webfont.woff’) format(‘woff’), url(‘fonts/PTS55F-webfont.ttf’) format(‘truetype’), url(‘fonts/PTS55F-webfont.svg#pt_sansregular’) format(‘svg’); font-weight: normal; font-style: normal; }

CSS правило выше определяет подключаемый шрифт и несколько правил его начертания (стандартное, наклонное, жирное и жирное-наклонное). Для их поддержки в разных браузерах подключаются разные форматы — .eot, .woff,.ttf,.svg. После подключения нестандартных шрифтов на сайте — их можно использовать в css как нативные. Только не забудьте проверить корректность их отображения и на всякий случай указать после основного шрифта несколько стандартных (наиболее похожих по начертанию).

.classname { font-family: pt_sans, Tahoma, Arial, sans-serif; font-size: 20px; font-style: italic; font-weight: bold; }

На заметку: Некоторые даже стандартные шрифты могут немного по разному отображаются в Windows и Mac os, например Tahoma или Arial. Сгенерировать кроссбраузерный набор шрифтов можно с помощью этого онлайн инструмента.

Хочешь стать экспертом в SEO? Пройди курсы от SEO Интеллект Понравилось? Репост!

Кроссбраузерное подключение шрифтов

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

Стандартом подключения шрифта является такая конструкция:

@font-face { font-family: «B52»; /*название шрифта, которое будем использовать в дальнейшем*/ src: url(«fonts/B52.ttf»); } body { font-family: «B52» } /* используем загруженный ранеее шрифт*/

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

Для начала надо конвертировать исходный шрифт в различные форматы, а затем подключить их все. Благо online сервисов конвертации хватает. К примеру font2web или более профессиональный font-face Generator. Первый не предлагает никаких настроек, вы даете ему шрифт, а он выдает готовые css файл и набор шрифтов в различных форматах. Во втором есть куча настроек, но я понятия не имею для чего они нужны =) По опыту скажу, что font2web съел мой шрифт, от которого ffgenerator отрекся, как от безнадежно больного.

Если дизер не предоставил Вам шрифт, но он установлен на Вашем компьютере то взять его можно тут C:\Windows\Fonts, где буква C это тот раздел, где у Вас установлена ОС. Однако если дизайнер применил какие-то новые авторские шрифты, то попросите его предоставить их вместе с макетом ( Сам .psd файл не содержит шрифтов)

В результате font2web выдал мне zip архив c таким css:

/** Generated by FG **/ @font-face { font-family: ‘Conv_B52_____’; src: url(‘fonts/B52_____.eot’); src: local(‘☺’), url(‘fonts/B52_____.woff’) format(‘woff’), url(‘fonts/B52_____.ttf’) format(‘truetype’), url(‘fonts/B52_____.svg’) format(‘svg’); font-weight: normal; font-style: normal; }

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

<link href=»examples/fonts.css» rel=»stylesheet» type=»text/css» /> <p style=»font-family:Conv_B52_____; font-size:150%;»> Теперь дизер и верстальщик могут спать спокойно.</p> <p>

Теперь дизер и верстальщик могут спать спокойно.

Теперь сайт сам по себе уникален, имеет свое лицо, однако пользователи не спешат остаться на нем. Возможно, с ним что-то не так в плане юзабилити. Сервис http://sitepolice.ru/e-store/audit-saita/ позволит произвести качественный аудит сайта, для последующей его раскрутки.

Рассказать друзьям


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *