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

Для обеспечения кроссбраузерности в отображении шрифтов, представляю вашему вниманию сервисы для конвертации шрифтов онлайн (.ttf в .eot , .woff и прочие)

 

 

FontSquirrel

Весьма удобная служба для встраивания шрифтов и их автоконвертации в форматы woff, ttf, eot и swg. 

Нажмите кнопку "Add Fonts", подтвердите соглашение и загрузите шрифты, которые необходимо сконвертировать. Если вам нужно выбрать более тонкую настройку конвертации, выберите опцию экспертов. В результате получаем архив с демонстрацией верстки с уже подключенными всеми необходимыми форматами шрифтов, то есть для всех браузеров при помощи font@face.

Внимание!
Для успешной конвертации кириллических символов обязательно клацнуть по "EXPERT..." и затем "No Subsetting" 

fontsquirrel-2

Другие сервисы и способы встраивания нестандартных шрифтов на сайт:

Google Fonts

Font2Web

Convert Fonts

Благодаря этим сервисам совместимость с разными браузерами (и разными версиями браузеров) увеличивается до 100%

Cufon:

И все-таки - не всегда выше приведенные сервисы могут сконверировать нужный шрифт, как было у меня, к примеру, с шрифтом B52 на сайте keller.su

Тогда нам поможет cufon - генератор шрифта на JS. При этом, все тексты все равно останутся читаемыми для поисковиков! Все что нам нужно - сгенерировать код и подключить 2 скрипта:

<script src="/js/cufon.js"></script>
<script src="/js/B52_400.font.js"></script>

B52_400.font.js - это, в моем случае шрифт сконвертированный куфоном, а cufon.js скачать можно тут - cufon.js

Теперь в <head> можно прописать для каких элементов будет подмена шрифта:

<script>
    Cufon.replace("h1");
</script>

Для того чтобы использовался :hover :

Cufon.replace('.mainnav ul li a', {hover:true});

Для стлей внутри куфона:

Cufon.replace("ul.menu li a");
Cufon.replace("ul.menu li.active a", {color:'#000'});

Следует так же сказать, что для эффекта ховер, а так же для дополнительных стилей необходима подключенная библиотека JQuery

Для нескольких шрифтов пример:

<script src="/js/Frutiger_LT_Std_400.font.js"></script>
<script src="/js/Myriad_Pro_400.font.js"></script>
<script>
    Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
    Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
 

Комментарии   

0 #1 Rebekah 12.07.2014 17:35
Я Ольга Юрьевна, только что
мне стукнуло тридцать шесть полных лет, и
поэтому я готова с абсолютною уверенностью сказать, что только что я родилась вновь.
Я полностью не больна! Лично я никак не устаю это акцентировать,
по той причине что даже квалифицированн ые эскулапы разводят руками, говоря о моем случае: после длительных лет мучений, постоянного ухудшения
здоровья все проявления окончательно как в воду канули!
Ваш покорный слуга вновь полна жизненных сил,
словно в молодости, а абсолютно все мои личные
горести остались в минувшем.
И все перечисленное вследствие вот данной схеме, какая очень многим позволяет встать на ноги в том
числе и тем людям, кто мучился остеохондрохом и нездоровыми суставами не один
десяток прошедших лет.

Also visit my site; остеохондроз (Rebekah: http://www.youtube.com/watch?v=M5z41lY14PU)
Цитировать

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


Защитный код
Обновить