@ font-face для пользовательских шрифтов, шрифтов, несовместимых в Chrome

Question

У меня есть веб-приложение, использующее шрифт CSS3 @ font-face для встраивания пользовательских шрифтов. Пока это отлично работает в IE и Firefox.

С Chrome, однако, пользовательские шрифты кажутся пиксельными и негладкими. Ниже приводится ссылка на экране фрагмент примера моего шрифта в Firefox & IE (вверху) и хром (внизу): Screenshot comparison

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

Ниже приведен пример того, как я использую @ шрифта лицо в моей таблице стилей:

@font-face 
{ 
    font-family: 'MyFont'; 
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'), 
     url('../Content/fonts/MyFont.ttf') format('truetype'); 
} 

Другое дело, возможно, стоит отметить, что, когда я подтяните сайта в любом браузере работает на виртуальной машине , шрифты SUPER choppy, намного хуже, чем пример Chrome. Это происходит, когда я использую какие-либо из моих школьных компьютеров, на которых все работают на рабочих станциях Win7 VMWare. Это также происходит, когда я вытягиваю сайт из виртуальной машины Windows 7, работающей на Mac друга.

Answer 1

Это известная проблема, что Chrome разработчики фиксируют:

http://code.google.com/p/chromium/issues/detail?id=137692

Чтобы работать вокруг до тех пор первым попробовать:

html { 
    text-rendering: optimizeLegibility !important; 
    -webkit-font-smoothing: antialiased !important; 
} 

Если это не работает для вас, эта работа вокруг работал для меня (выше не исправить окна Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

Похоже, что он изменил правило CSS шрифта @ font-face, чтобы позволить svg появиться «первым».

пример:

-before-------------- 

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


-after-------------- 

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

Answer 2

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

Но не все потеряно, здесь 20 бесплатных шрифтов (! Бесплатно для коммерческого использования, даже), которые оказывают весьма приятно (я всегда в конечном итоге проверки этот список): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

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

Answer 3

Вы можете играть с optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

А также -webkit-шрифта Сглаживание http://maxvoltar.com/archive/-webkit-font-smoothing

Он также может быть стоит использовать шрифтам Бурундуки генератор шрифтов для генерации WebFonts и CSS для загрузки в шрифтах: http://www.fontsquirrel.com/fontface/generator (хотя я не уверен, если это будет исправить вашу проблему или нет)

Answer 4

Для меня лучше всего работали:

@font-face { 
    font-family: MyFont; 
    src: url("MyFont.ttf") format('truetype'); 
} 

h1 { 
    font-family: MyFont; 
    -webkit-text-stroke: 0.5pt; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 5

Я предложил бы использовать это:

-webkit-text-stroke: 0.3pt; 
-webkit-font-smoothing: antialiased; 

Answer 6

Попробуйте добавить -webkit-преобразование: translateZ (1px); или другой 3d преобразования.

объяснение:

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

пример1 (выпуск): chopped text. Я добавил ротацию здесь, чтобы убедиться, что текст нарезается.
пример2 (решаемый): semi-smooth text. Применение 3d-преобразования делает текст размытым, поэтому нарезанный текст кажется более гладким.

Небольшая проблема заключается в том, что мы не можем нацелить только на Windows-версии Chrome в CSS, поэтому мы должны использовать javascript для применения соответствующего класса.

Answer 7

Этот вопрос будет решен с Chrome 37.

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