Потратил некоторое время на этот вопрос, и чтобы оно не было потрачено зря, излагаю то, что удалось накопать.
Использование произвольных шрифтов, загружаемых вашим сайтом, это реально. Помните, что файлы шрифтов могут быть весьма нескромных размеров, так что увлекаться этим нужно осторожно. Конечно, Интернет будет только расширять свои каналы, и скоро можно будет не делать подобных оговорок.
Загрузить шрифт с сервера, а потом использовать можно примерно как то так (см. кусочек CSS):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@font-face { font-family: FontFamilyName; /* тут зададим синоним, который используем далее */ src: url("/fontlocation/font.eot"); /* это случай для IE, как получить .eot - cм. ниже*/ /* для прочих (нормальных, дружащих со спецификациями) браузеров */ src: local("Local Font Name"), local("LocalName"), /* пытаемся угадать локальное имя шрифта, чтобы браузер мог подгрузить его не скачивая; в противном случае придется качать */ url("/fontlocation/font.ttf") format("truetype"); /* указываем где лежит шрифт и его тип*/ } /* а это пример использования, указываем описанный выше синоним первым в списке */ h1 { font-family: FontFamilyName, ... ; } |
Как показано выше в кросс-браузерном примере, предлагают делать на сайте randsco.com. Там очень подробно написано по существу данного вопроса, правда, по-английски.
Форматы шрифтов.
Существует великое множество разных форматов шрифтов и способов их взаимного преобразования. Все эти способы собраны в кучу в виде сервиса на одном сайте. Вы сможете загрузить свой шрифт на этот сайт, и выполнить преобразование в любой из описанных там форматов. Формат .EOT — нам нужен только для IE, который до 9й версии других форматов знать не хотел.
Ну, и дам ещё одну полезную ссылку на описание формата СSS от W3С в той его части, которая относится к шрифтам.
Все тоже самое только быстро, и не заморачиваясь.
Напоследок оставил самую нужную ссылку, чтобы наградить ею самых терпеливых. Сервис @font-face генератор на сайте fontsquirrel.com делает практически все за вас. И преобразование в нужные форматы, и создание кроссбраузерного CSS кода. Вам нужно загрузить ваши truetype шрифты, а генератор выдаст вам архив со всеми нужными форматами шрифтов, css файлом и примером использования всех этих файлов.
Если шрифто-белка не работает, есть аналогичный сервис — www.font2web.com.
Из личного опыта.
1. Не все шрифты содержат кириллические символы. Иногда об этом забывается, тогда кириллица отображается следующим шрифтом из списка font-family или шрифтом выбранным «по-умолчанию».
2. Иногда браузеры (у меня так себя вели Chrome и Opera), загрузив шрифт, устанавливают по умолчанию какое то (видимо максимальное в шрифте) значение свойства line-height, для загруженного шрифта. Так что не поленитесь и проверьте, где и что расползлось в вашей верстке. Придется эти места фиксить установкой line-height.
3. Если не знаете какой бы вариант выбрать в @font-faсе генераторе, выбирайте basic.
