Веб-шрифт в Chrome

Question

У меня есть веб-шрифт, который выглядит потрясающе на Firefox, а не на Chrome. Я пытался играть со свойством text-rendering, но результаты были менее впечатляющими. Мой CSS выглядит примерно так:

@font-face {
    font-family: 'TextFont';
    src: url('[my font file url]') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: TextFont, Tahoma, Geneva, sans-serif;
    text-rendering: auto;
}

Изменение text-rendering, похоже, ничего не делает в Firefox, поэтому я публикую для него один скриншот.

Результаты:

• Firefox (a.k.a. "как это должно выглядеть")

  

• Хром - text-rendering: auto

  

• Хром - text-rendering: optimizeLegibility

  

• Хром - text-rendering: optimizeSpeed

  

• Хром - text-rendering: geometricPrecision

  

Все скриншоты Chrome выглядят очень плохо по сравнению с Firefox. Что-то мне не хватает в CSS?

Я использую Windows 7, Firefox 8.0 и Chrome 15.0.

Answer 1

Не уверен, что это именно то, что вы видите, но в Chrome есть проблема со сглаживанием и шрифтами TrueType. В соответствии с http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, вы можете вместо этого указать шрифт SVG перед TrueType в шрифте, например ::10000

@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');
}

Самым большим недостатком является то, что Safari загрузит как svg, так и woff.

Answer 2

Попробуйте это:

 -webkit-text-stroke: .5px

.5 является произвольным - ключевое значение имеет значение от 0 до 1. Это вызывает субпиксельную намеки на шрифт.

Демонстрацию можно посмотреть здесь: http://dabblet.com/gist/4154587

Answer 3

Там действительно нет ничего, что вы можете сделать, чтобы улучшить это с помощью CSS. Механизмы рендеринга текста отличаются между Firefox и Chrome, и вы видите результаты. Если шрифт неправильно настроен и не подготовлен для веб-шрифта, можно ожидать, что подобные результаты будут улучшены.

Где был куплен шрифт?

Вы можете попробовать запустить его через FontSquirrel, чтобы увидеть, может ли какая-либо из автоматических подсказок, которые предлагает Итан, нормализовать это немного.

Некоторая дополнительная информация о рендеринге и DiretWrite, которую вы видите как большие отличия ... http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 4

Вот как я все делаю, и это работает на IE, Firefox, Chrome

@font-face {
   font-family: 'NeutraTextBold';
   src: url('../fonts/neutra_text_bold-webfont.eot');
   src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/neutra_text_bold-webfont.woff') format('woff'),
     url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'),
     url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg');
  font-weight: normal;
  font-style: normal;

}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}

Я получаю свой код от fontsquirrel

Answer 5

Chrome объявил в Chrome 37, что он будет переключаться с интерфейса графического устройства Windows на API-интерфейс DirectWrite от Microsoft, технологию, улучшающую внешний вид шрифтов на современных экранах.

The Beta is now out: https://www.google.com/chrome/browser/beta.html

От Google: http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html