OTF Web Font делает ошибки в Webkit/Chrome на Windows

Question

Кто-нибудь сталкивается с этой проблемой? Windows 7 Chrome веб-шрифта OTF вопрос:

У меня есть веб-шрифт и добавить его с помощью CSS3 ... Выглядит здорово в FF/IE (или принимает резервную копию)/Safari, но в Chrome (Windows) это выглядит довольно ужасно:

Я попытался это: -webkit-font-smoothing: antialiased;

... который фиксирует его в Safari, но не Chrome и увидел, что здесь Mac должно работать: Does -webkit-font-smoothing only work on Mac browsers, Not windows?

Я проверил это тоже: http://maxvoltar.com/archive/-webkit-font-smoothing

Вот что у меня есть:

@font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;} 

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;} 
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; } 

Наконец я попытался Mozillas текста рендеринга увидеть, если это поможет WebKit, но ничего: https://developer.mozilla.org/en-US/docs/CSS/text-rendering

.... Не конечно, если есть что-то еще, что может решить это.

Answer 1

Так что мое решение было преобразовать это вложенный открытый тип:

.eot, а также добавить .woff для другой поддержки браузера.

Это действительно здорово, потому что он прекрасно работает в IE9 (даже IE8)

:)

src: url('/fonts/SeravekBasic-Regular.eot'); src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/SeravekBasic-Regular.woff') format('woff');

Answer 2

Я бы не рекомендовал использовать OTF для WebFonts. Это вызывает некоторые проблемы с рендерингом для людей, использующих Windows XP. Вам понадобится использовать пуленепробиваемый синтаксис шрифтового шрифта с запросом на мультимедиа, определяющим SVG для хром.

Пример для PT Sans

@font-face { 
font-family: "PT Sans"; 
src: url("ptsans.eot"); 
src: url("ptsans.eot?#iefix") format("embedded-opentype"), 
    url("ptsans.woff") format("woff"), 
    url("ptsans.ttf") format("truetype"), 
    url("ptsans.svg") format("svg"); 
font-weight: normal; 
font-style: normal 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
@font-face { 
    font-family: "PT Sans"; 
    src: url("ptsans.svg") format("svg") 
} 
} 

Chrome использует старую систему рендеринга шрифтов, поэтому он не показывает шрифты, как ясно. Хром-шрифты выглядят лучше всего с помощью SVG, поэтому вам нужно указать медиа-запрос, чтобы обслуживать только файл SVG. Дополнительную информацию о синтаксисе можно найти здесь: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.

Вы должны включить форматы ttf, eot, woff и svg в свой синтаксис @ font-face. Браузер не будет загружать каждый из них, он загружает только тот, который ему нужен. Он также добавляет соответствующий запас. Это должно решить большинство проблем с отображением шрифтов. Вы можете получить соответствующие файлы для своего правила @ font-face, используя генератор шрифтов: http://www.fontsquirrel.com/tools/webfont-generator.