Зубчатый шрифт в Windows - Chrome & Safari

Question

Я использую пользовательские шрифты на своей веб-странице, используя следующий код:

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

Это прекрасно работает во всех браузерах на Mac, но, глядя на ПК на Chrome и Safari, оно выглядит неровным. Есть ли какие-то исправления, которые я мог бы использовать, чтобы все выглядело одинаково? Ниже показана разница (Mac слева, ПК справа - оба в Chrome).

Answer 1

@ font-face шрифты на ПК, как правило, выглядят немного более странными, но «Подсказка» шрифтов улучшит читабельность.

Попробуйте запустить ваши шрифты через преобразователь белка шрифтов, который может обрабатывать подсказки как частьконверсии.

http://www.fontsquirrel.com/fontface/generator

В качестве примечания я бы просто не использовал @ font-face для Helvetica, а просто полагался на людей, у которых установлен шрифт, отступая кArial.Не самый близкий матч, но он даст вам лучший результат.

Answer 2

Похоже, что Chrome не нравится, чтобы SVG назывался последним в объявлении CSS @ font-face. Добавьте это после своего @ font-face {...} в своем CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.svg') format('svg');
  }
}

Запрос @media предназначен для браузеров webkit и указывает им использовать только файл .SVG. По моему опыту, это улучшает рендеринг в Windows Chrome.

ВНИМАНИЕ: это исправление может вызвать другую проблему в Chrome в Windows 7 или 8, с которой я иногда сталкивался: использование этого исправления иногда предотвращает перенос слов в Chrome в Windows. Очень странное поведение, которое происходит только иногда, и я не нашел решения для. Вопрос об этом был размещен здесь:

Странная проблема длины слова при использовании font-face в Chrome

Answer 3

Вы можете попробовать:

-webkit-transform: rotate(-0.0000000001deg);

Это поворачивает элемент ровно настолько, чтобы браузер отображал его как сглаженный.Не знаю, что это делает для производительности, но я не заметил никакой разницы в рендеринге.

Решение найдено здесь: https://twitter.com/#!/komejo/statuses/117241707522818048

Answer 4

Это, кажется, делает трюк:

html {
    -webkit-text-stroke-width: .10px;
}

Answer 5

Это принципиальная разница между тем, как Windows и OS X обрабатывают рендеринг шрифтов, поэтому вы мало что можете сделать. Одно из хакерских исправлений для Chrome - добавление почти невидимой тени (text-shadow: rgba(0, 0, 0, .01) 0 0 1px), которая заставляет его сглаживать текст. Такие службы, как Typekit, прилагают все усилия, чтобы решить проблему, например, , обслуживающие шрифты в виде констант PostScript , но это не очень помогает вашей проблеме.

Answer 6

Я не уверен, какую ОС вы используете, но вам может потребоваться включить ClearType для экранных шрифтов.

В XP: перейдите на панель управления Дисплей и выберите Внешний вид Вкладка.Оттуда нажмите Эффекты .Установите флажок . Используйте следующий метод, чтобы сгладить края экранных шрифтов , а затем выберите ClearType в списке.

Это решило проблему для меня в прошлом.

Answer 7

Да, есть. Используйте альтернативу, например cufon для гладких шрифтов.