Нередко бывает, что клиент хочет «вот этот красивенький шрифтик ААА» себе на сайт. Раньше это было в большинстве случаев недоступно, пока не появились различные библиотеки для работы с нестандартными шрифтами либо тот же @font-face. Существуют также решения типа sIFR, cufon, и другие, хотя они, возможно, по сравнению с предлагаемым методом не так элегантны. Холиварить, что лучше мы не будем.
Да и с @font-face могут быть проблемы с лицензиями на шрифты и другие вещи.
Еще когда-то большая часть сайтостроителей пользовались картинками (да и сейчас замечается). Иногда мне в те времена приходилось отказываться от картинок в пользу быстрой загрузки сайта (ведь тогда еще скорость Интернетов была не такая как сейчас). Но заказчику объяснить, почему лучше не использовать тот или иной «красивенький» шрифт — весьма трудно. Да и не должно такое быть на самом-то деле!
Какой же вариант наиболее оптимален?
В общем, каждый решал (решает) вопросы, возникшие со внедрением нестандартных шрифтов по-своему. Кому-то они нравятся, а кто-то, быть может, часто наступает на грабли.
Поэтому стоит рассмотреть (а кому-то напомнить) о замечательном сервисе — Google Font API. Сразу предупрежу: это не панацея, не решения всех проблем, но как отличная альтернатива всему тому, чем мы пользовались раньше/пользуемся сейчас.
С помощью Google Font API можно внедрять веб-шрифты на любую веб-страницу, как и большинство других инструментов позволяют это делать. В чем же преимущества?
Google Font API включает в себя:
- Выбор высококачественных оупенсорс-шрифтов.
- Работает в большинстве браузеров (но не во всех).
- Крайне прост в использовании.
- Поскольку все хостится на Google, поэтому сохраняется пропускная способность.
- Поскольку они находятся в одном и том же месте в Интернете, веб-браузер будет их кэшировать и для других сайтов, загрузив только раз.
Минусы:
- Все-таки неполная поддержка браузеров (например, Firefox 3.6.13 Ubuntu!)
- Очень малое количество кириллических шрифтов (есть надежда, что скоро их будет больше)
ПО поводу малого количества — есть возможность добавлять свой шрифт.
Так же есть просмотрщик шрифтов, с помощью которого можно подобать шрифт и его характеристики, который нужен. А для Chrome в дополнение к этому предлагается специальное расширение.
Как уже говорилось, использование API очень просто. Просто добавьте в секцию <head>… </head> веб-странички строчку, которая будет загружать необходимые CSS:
А затем использовать его в вашем CSS следующим образом:
h1 { font-family: 'Lobster', arial, serif; }
Как работает API? Когда браузер посылает запрос на получение таблицы стилей к Google Font API (как указано в теге <link>), Font API генерирует таблицу стилей для конкретного браузера пользователя, сделавшего запрос. Это в основном помогает разработчикам проверить версию браузера и вставить нужный CSS.
Для лучшего отображения в IE, вставляйте тег <link> первым элементом в секции <head>. В IE, если ссылка размещена после тега <script>, вся страница будет блокироваться и не отобразится ничего, пока веб-шрифт не загрузится.
Chrome, Opera, Safari и Internet Explorer покажет пробел перед тем, как шрифт загрузится, а FireFox же покажет недекорированый шрифт. Google предлагает загрузчик, который заставляет всех браузеров вести себя, как FireFox.
Вот пример, взятый из Google документации интерфейс работы со шрифтами:
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
- </script>
- <script type="text/javascript">
- WebFont.load({
- google: {
- families: [ 'Tangerine', 'Cantarell' ]
- }
- });
- </script>
- <style type="text/css">
- .wf-inactive p {
- font-family: serif
- }
- .wf-active p {
- font-family: 'Tangerine', serif
- }
- .wf-inactive h1 {
- font-family: serif;
- font-size: 16px
- }
- .wf-active h1 {
- font-family: 'Cantarell', serif;
- font-size: 16px
- }
- </style>
- </head>
- <body>
- <h1>This is using Cantarell</h1>
- <p>This is using Tangerine!</p>
- </body>
- </html>
* This source code was highlighted with Source Code Highlighter.
Для интересующихся рекомендую сходить на Google Font API, чтобы увидеть список доступных шрифтов и почитать документацию.
Итак, что наиболее оптимально - выбирать всегда вам, я лишь привел свои размышления по сему поводу. Может кто-то решит, что это лучший способ, а кто-то убедится, как НЕ нужно делать. Да и случаи внедрения бывают неоднородные.
В любом случае пусть будет этот Ваш выбор на пользу того дела, которое вы делаете.