@ проблема рендеринга шрифтов в Chrome для ПК

Question

Я использовал 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;

}

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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

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

Answer 4

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

Похожая тема здесь: @ сглаживание шрифта-шрифта в Windows и Mac

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