Что делать, если есть необходимость оформить веб-страницу с помощью нестандартных шрифтов?
Возможностей две:
1 - сделать текст картинкой
2 - загрузить вместе с кодом на компьютер пользователя нужный шрифт.
Рассмотрим второй вариант.
Существует специальное правило @font-face
задаем нужный шрифт
@font-face {
font-family: font;
src: url(font.ttf);
}
затем в коде указываем, где его использовать.
P {
font-family: font;
}
Но, если посмотреть на результат - это будет работать практически во всех новых браузерах, кроме IE :(
Internet Explorer поддерживает только шрифты формата EOT. Где их взять?
конвертировать нужный фонт http://onlinefontconverter.com/myfonts.php
или http://www.fontsquirrel.com/fontface/generator
продолжение следует
ещо конверторы:
Online:
http://ttf2eot.sebastiankippe.com/
http://www.kirsle.net/wizards/ttf2eot.cgi
Скачать:
http://code.google.com/p/ttf2eot/downloads/list
Free web fonts
(уже конвертированные шрифты):
http://www.fontspring.com/free
http://www.fontshop.com/freefonts/
@font-face спецификация:
http://www.w3.org/TR/css3-fonts/#the-font-face-rule
Еще можно использовать js-рендерер шрифтов, например
http://cufon.shoqolate.com,
http://typeface.neocracy.org
В общем случае они конвертируют шрифт в собственный векторный формат, который рендерят в картинку + вставляют невидимую разметку, чтобы текст выделялся.
ещё 1 голос за http://cufon.shoqolate.com т.к. он обеспечивает идентичное отображение на всех браузерах:
Самый простой и технически верный вариант, это использование fontsquirrel.com
В связи с его использованием могут возникнуть две проблемы:
1. Он не принимает шрифты некоторых студий, ругаясь про копирайт
2. Не реализована защита от мигания в IE, например, как сделано на typekit
Для решения первой проблемы надо исправить шрифт любой программой редактирования шрифтов, убрав пометку о копирайте.
Решить вторую проблему можно добавив скрипт с гугла.
В head добавить:
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)