Из всех доступных способов встраивания нестандартных шрифтов на страницу мне больше всего нравится font-face. За то, что он везде работает, позволяет выделить и скопировать текст, функционирует в «визивигах» и т.д. Вот только 1 беда не даёт мне покоя. Надписи выглядят везде по разному, и, чаще всего, ужасно или просто кошмарно.
Сейчас я верстаю сайт, который использует LeagueGothicCyrillic. Изначально я располагаю форматом ttf, через
font2web я получаю все остальные форматы. В тестовой же HTML начертание оставляет желать лучшего. Примеры:
1. Chrome, winXP SP2 —
![](http://habrastorage.org/storage2/093/e85/251/093e85251649d5553d1be3e6640b1f2b.png)
2. Chromium, Xubuntu12 —
![](http://habrastorage.org/storage2/d1a/020/41a/d1a02041a7bd8ea7fdb36f71d8739b4d.png)
3. Opera12, winXP SP2 —
![](http://habrastorage.org/storage2/18e/05e/ef6/18e05eef6076f03d490004e0794cc413.png)
4. Opera12, Xubuntu12 —
![](http://habrastorage.org/storage2/77d/7f3/9a2/77d7f39a2a0db5218f2998f5d72a82d4.png)
5. Chrome, win7 —
![](http://habrastorage.org/storage2/3e2/18f/a52/3e218fa52702ea5fbba2710e4d6de8c8.png)
6. IE9, win7 —
![](http://habrastorage.org/storage2/589/7a5/5d9/5897a55d9c830feef8455f3ca461a4d0.png)
7. PS5 —
Такие же проблемы были и с Helvetica, и, я так подозреваю, со всеми шрифтами, которые мне придётся встраивать. В пределах font-face ничего сделать нельзя? Остаётся только Cufon и компания?
=== решение ===
Следует поиграть с расположением шрифтов в font-face. У меня наиболее оптимальным вышел вариант:
@mixin font_inline( $name, $filename )
{
@font-face {
font-family: $name;
src: url('../fonts/#{$filename}.eot?##{$name}') format('eof');
}
@font-face {
font-family: $name;
src: local('☺'),
inline-font-files('#{$filename}.ttf', truetype ),
url('../fonts/#{$filename}.woff?#reforma') format('woff'),
inline-font-files('#{$filename}.otf', opentype );
font-weight: normal;
font-style: normal;
}
}