Проблемы с рендерингом шрифтов Windows с @ font-face в CSS - PullRequest
Новая
       42

Проблемы с рендерингом шрифтов Windows с @ font-face в CSS

7 голосов
/ 14 февраля 2012

У меня проблемы с @ font-face на компьютерах с Windows (не важно, какой браузер). Работает нормально в Linux и OSX.

Это код CSS, который я использую (генерируется с помощью font-squirel)

Проверьте скриншоты на наличие проблемы .. Кажется, есть 2 проблемы

  • На окнах шрифты «танцуют». Не выровнены по базовой линии.
  • На окнах шрифты выглядят не сглаженными.

У кого-нибудь есть идея? Заранее спасибо.

Снимок экрана в OSX и Linux:

http://j3rn.org/images/ob_font1.png

Снимок экрана в Windows:

http://j3rn.org/images/ob_font2.png

Код CSS 

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

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

Ответы [ 4 ]

3 голосов
/ 13 августа 2013

У нас была похожая проблема с некоторыми из наших шрифтов, и я вполне уверен, что исправлено, что было установлено «Подсказка истинного типа» на «Сохранить существующий».

enter image description here

1 голос
/ 19 марта 2013

Я столкнулся с той же проблемой несколько недель назад. Мы храним векторную графику в файле шрифтов, чтобы избежать реализации отдельных изображений или спрайтов CSS. Простой обходной путь - использовать, например, шрифт squirrel

http://www.fontsquirrel.com/tools/webfont-generator

без (!) Опции оптимизации, которая обрабатывает ваш шрифт, чтобы оптимизировать его для Интернета, и иногда ломает его из-за попыток сжатия, если они не соответствуют некоторым стандартам. Возможным недостатком может быть то, что ваши файлы станут немного больше. Вы также можете попробовать этот веб-сервис:

http://fontface.codeandmore.com/indexnew.php

Надеюсь, это поможет!

0 голосов
/ 23 марта 2013

Выступая здесь, но я думаю, что вы загрузили (незаконно?) Альтернативу Helvetica, созданную до веб-разработки, в "roll-your-own" @ face-kit ... tisk. Tisk.

Результаты, которые вы получаете, довольно типичны для ПК, отображающих шрифты на экране.

FF Schulbuch Nord: создан в 1991 году (239 долларов, если вы хотите купить его на fontshop.com). http://www.fontshop.com/fonts/singles/fontfont/ff_schulbuch_nord_ot_regular/&s=c

TexGyre на fontsquirrel - довольно неплохая (хотя и не такая красивая) альтернатива Helvetica, и она хорошо выглядит на ПК, Mac и т. Д.

0 голосов
/ 19 марта 2013

Что касается сглаживания, то при рендеринге тонкого текста окна могут быть довольно уродливыми. Обычная хитрость заключается в том, чтобы попробовать применить обводку текста следующим образом: 

-webkit-text-stroke: 0.3px

Что касается вашей базовой проблемы, то это похоже на проблему с реальным шрифтом. Если вы не привязаны к @ font-face, я довольно неравнодушен к Google Webfonts

Вам просто нужно включить ссылку css в заголовок, а затем присоединить соответствующий шрифт к классу css.

...