Проблема с рендерингом @ font-face в Chrome для ПК

Я использовал font-squirrel для встраивания шрифта на сайт (с выбранным «Применить хинтинг»), и он некорректно отображается в Chrome v15.0 для ПК. Шрифт показывает, но плохо. Я уверен, что font-squirrel дал мне правильный код, поэтому предполагаю, что в моем CSS есть конфликт. Заранее спасибо за помощь.

введите описание изображения здесь

Ссылка на сайт

@font-face {
    font-family: 'RockwellStd-Light';
    src: url('rockwellstdlight-webfont.eot');
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('rockwellstdlight-webfont.woff') format('woff'),
         url('rockwellstdlight-webfont.ttf') format('truetype'),
         url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');
    font-weight: lighter;
    font-style: normal;

}

h1 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:34px;
    color:#407d3b;
    font-weight:lighter;
    margin-left:20px;

}

h2 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:32px;
    color:#ece1af;
    font-weight:lighter;
    line-height:42px;

}

h3 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:20px;
    color:#FFF;
    font-weight:lighter;

}

p {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    line-height:17px;
    color:#333;
    text-align:justify;

}

.criteria_table {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    color:#FFF;

}

google-chrome rendering font-face
person Richard Gouw    schedule 12.12.2011    source источник
comment
Что вы имеете в виду под словом «плохо»? Скриншоты или пример того, что происходит, были бы полезны, особенно потому, что я предполагаю, что это проблема кернинга.   -  person Jimmy Sawczuk    schedule 12.12.2011
comment
Это просто похоже на проблему с кернингом шрифтов Mac по сравнению с Windows (с вашей разметкой все в порядке). Может быть, просто попробуйте другой шрифт для пользователей Windows.   -  person Jimmy Sawczuk    schedule 13.12.2011

Ответы (4)


arrow_upward
3
arrow_downward

Вы можете указать текстовую тень:

text-shadow: 0 0 1px rgba(0, 0, 0, .01);

При использовании пользовательских шрифтов, чтобы они лучше отображались в Google Chrome. Это заставляет Chrome использовать альтернативный путь рендеринга. Обратите внимание, что это увеличит нагрузку на ЦП на компьютере конечных пользователей.

person Matthew    schedule 12.12.2011
comment
понятно! по какой-то причине он работал со следующими значениями: text-shadow: 0 1px 0 rgba (0,0,0,0.01); - person Richard Gouw; 13.12.2011
comment
Да, я напечатал наоборот, извините. - person Matthew; 13.12.2011

arrow_upward
8
arrow_downward

https://stackoverflow.com/a/9041280/1112665

Для шрифтов, поставляемых @ font-face, исправление состоит в том, чтобы поместить файл svg прямо под .eot, но выше .woff и .ttf.

Из этого:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
     url(‘webfont.woff’) format(‘woff’),
     url(‘webfont.ttf’)  format(‘truetype’),
     url(‘webfont.svg#svgFontName’) format(‘svg’);
}

К этому:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
     url(‘webfont.svg#svgFontName’) format(‘svg’),
     url(‘webfont.woff’) format(‘woff’),
     url(‘webfont.ttf’)  format(‘truetype’);
}

Примеры этого исправления можно увидеть здесь:

Примеры FontSpring
Примеры Adtrak

person hisnameisjimmy    schedule 04.11.2012

arrow_upward
2
arrow_downward

Извините, ребята, но в Chrome 16 это больше не работает.

Здесь похожая тема: @ font-face anti-aliasing на windows и mac

И я написал об этом здесь на форуме Google Chrome, ожидая реакции: http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

person Lubo Zviera    schedule 14.12.2011

arrow_upward
2
arrow_downward

Как уже указывалось hisnameisjimmy, решением является использование шрифтов SVG, которые всегда отображаются со сглаживанием, но это также имеет ряд недостатков:

  • Шрифты SVG не содержат никакой информации хинтов, поэтому отображаемые буквы не такие четкие, как в системе с включенным сглаживанием шрифтов.
  • Толщина и стиль шрифтов SVG изменить нельзя, поэтому использование font-weight:bold; или font-style:italic; не имеет никакого эффекта.

Однако, по крайней мере, первую проблему можно решить с помощью шрифтов SVG, только если сглаживание шрифтов фактически отключено. Есть хорошая запись User Agent Man о том, как определять сглаживание шрифтов, которое я использовал для создания небольшого скрипта (~ 600 байт), который автоматически обновляет ваш CSS font-face, если сглаживание шрифтов отключено.

Вы можете найти мой скрипт Font Smoothie на GitHub'S GIST, и все, что вам нужно сделать, это добавить следующая строка в любом месте вашей страницы:

<script src="fontsmoothie.min.js" type="text/javascript"></script>

Однако вам также понадобится хорошо hinted шрифт, чтобы получить красивые глифы. К счастью, есть способ добавить автоматически сгенерированную подсказку к шрифту ttf, используя ttfautohint, и тогда вы сможете используйте Font Squirrel для создания веб-шрифтов. Весь процесс немного сложен, поэтому я написал статья о том, как создавать веб-шрифты в пикселях | байтах, в которой объясняется, как добавить хинтинг к шрифту и как использовать мой скрипт Font Smoothie. Надеюсь это поможет :)

PS: Я знаю, что ссылка на мой собственный блог здесь не приветствуется, но я думаю, что мой пост описывает хорошее решение проблемы, поэтому я все равно разместил его. Если вы хотите, чтобы я удалил ссылку, оставьте комментарий, и я это сделаю.

person Torben    schedule 17.03.2013