Подтвердить что ты не робот

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

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 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;
}

Ответ 2

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

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

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

Ответ 3

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

А также -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

Также может понадобиться использовать генератор шрифтов font-squirrels для генерации ваших веб-сайтов и css для загрузки в шрифтах: http://www.fontsquirrel.com/fontface/generator (хотя я не уверен, что это исправит вашу проблему или нет)

Ответ 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;
}

Ответ 5

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

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

Ответ 6

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

объяснение:

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

example1 (issue): нарезанный текст. Я добавил поворот здесь, чтобы убедиться, что текст рубит.
example2 (разрешено): полугладкий текст. Применение 3d-преобразования делает текст размытым, поэтому нарезанный текст выглядит более плавным.

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