увеличенный рендеринг @font-face в Chrome / IE, fontsquirrel

#css #font-face

#css #шрифт-face

Вопрос:

Я использую @font-face для рендеринга пользовательского шрифта на сайте, шрифт ‘Ministry ExtraLight’, я также использую этот веб-сайт для создания файлов шрифтовhttp://www.fontsquirrel.com .

в FireFox это выглядит нормально. но в Chrome / IE / Safari это выглядит так, как будто шрифт размыт. когда я проверяю шрифт, он фактически установлен на

 font-weight: normal;
font-style: normal;
font-variant:normal
  

но это выделяет шрифт жирным шрифтом или добавляет веса шрифту.

кто-нибудь сталкивался с чем-нибудь подобным?

Рендеринг в Chrome / FF

Комментарии:

1. Что, если вы жестко задаете вес шрифта?

Ответ №1:

Это не совсем правда — я столкнулся с точно такой же проблемой: шрифт в Firefox и opera отображается тонким при нормальном весе шрифта, но webkits выделяют его жирным шрифтом — когда я применяю жирный шрифт к стилям во всех браузерах, они выглядят одинаково. Итак, firefox здесь не лишний, но веб-приложения отображают его неправильно и игнорируют вес шрифта.

Ответ №2:

Вы также найдете различия в рендеринге между Windows, OSX и Linux.

Похоже, что Firefox является странным, поэтому вам, вероятно, следует поискать, что там отличается.

Возможно, происходит то, что Firefox использует собственный рендеринг шрифта, в то время как другие используют рендеринг системного шрифта. Если в вашей системе настроено изменение шрифтов (сделайте их более жирными, включите различные типы сглаживания и т.д.), Вы можете увидеть описанный эффект.

Комментарии:

1. мой FF не настроен на изменение каких-либо шрифтов, он установлен по умолчанию. и это происходит на других компьютерах тоже. шрифт выглядит намного ближе к тому, как его отображает FF, чем другие 3 браузера, которые я тестировал.

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

Ответ №3:

Если вы не нашли способа это исправить, используйте Cufon http://cufon.shoqolate.com/generate

Комментарии:

1. Я использовал cufon, но это делает все таким слабым

Ответ №4:

Хотя то, что сказал Пол, верно (о рендеринге), вы можете попробовать что-то еще, включая css-объявления reset / fonts от Yahoo!

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

ссылка: http://developer .yahoo.com/yui/3/cssfonts/ , http://developer .yahoo.com/yui/3/cssreset/

Ответ №5:

Я заметил то же самое.

Поскольку я не нашел решения, я решил использовать тот же шрифт в Google Webfont вместо этого.

http://www.google.com/webfonts

Плохо то, что веб-шрифты Google намного больше (Open Sans в ~ 2-3 раза больше, чем Open Sans в font-squirrel), так что будьте осторожны.