@font-face сглаживание в Windows и Mac

Это выглядит как обычный уродливый способ отображения шрифтов в WinXP. Некоторые (IMO: заблуждающиеся) люди даже предпочитают это.

Чтобы получить сглаживание для настольных шрифтов в целом на XP, вы должны включить его, выбрав «Свойства экрана» -> «Внешний вид» -> «Эффекты» -> «Используйте следующий метод для сглаживания краев экранных шрифтов» -> «ClearType». Параметр по умолчанию «Стандартный» — это устаревшая техника «размазывания шрифтов» в Windows, которая беспокоит только включение при больших размерах шрифта, а затем часто создает беспорядок.

В IE7+ есть опция — включенная по умолчанию — всегда использовать сглаживание ClearType для отображения шрифтов в веб-браузере. Другие веб-браузеры будут учитывать настроенный пользователем метод отображения шрифта. Жаль, что у многих людей эта полезная настройка отключена, но на самом деле это не ваша проблема.

(Существует неприятный хак, позволяющий Chrome выполнять некоторое сглаживание текста, а именно:

text-shadow: 0px 0px 1px rgba(0,0,0,0);

но я бы не советовал.)

Одна вещь, которую вы можете сделать, когда для параметра «Использовать следующий метод...» установлено значение «Стандартный», попытаться заставить шрифт получить некоторую форму сглаживания, это проверить, что рассматриваемый шрифт не имеет таблицы GASP, сообщающей старомодным средствам визуализации TrueType отключить сглаживание для определенных размеров шрифта. Вы можете изменить таблицу GASP с помощью редактора шрифтов или с помощью инструмента командной строки ttfgasp.exe.

Я тоже страдал от этого в Chrome, и я думаю, что только что нашел ответ!

Chrome не понравился CSS, созданный fontsquirrel.com по умолчанию.

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

Чтобы исправить, я переместил строку SVG:

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

в начало списка. Теперь я вижу сглаженные шрифты! Я думаю, Chrome хочет быть первым...

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Надеюсь, это сработает и для вас. Наслаждаться!

Я удивлен, что никто не упомянул об этом. Применение легкого -webkit-text-stroke помогает мне независимо от формата (расширения) используемого вами шрифта. Некоторые рекомендуют -webkit-text-stroke: 1px, но для меня это слишком сильно меняет внешний вид шрифта (сделайте его слишком сильным). Но 0,5px делает обводку почти незаметной и включает сглаживание:

-webkit-text-stroke: 0.5px;

Поместите его в свое определение css для тега html, и все готово!

Существует также шрифт под названием Vegur, который выглядит как Myriad Pro, но его можно встраивать в веб-сайты. Надеюсь, это поможет!

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

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

Кроме того, я считаю, что полностью черный цвет (#000000) тоже не помогает. Использование очень темного, казалось, помогло мне.

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

Трюк с

text-shadow: 0 0 1px rgba(255,255,255,0.1);

or

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

больше не работает в Chrome 16.0.912.63 m, Windows Vista.

Я не мог найти способ преодолеть эту проблему, хотя.

Это код, который я использую для исправления «проблемы с рендерингом Chrome»:

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) это работает для меня... НАКОНЕЦ-ТО!

-webkit-transform: повернуть (-0,0000000001 градус);

Обновление: больше не работает в Chrome 15.0.874.106 m. Хотя это работает в IE9 и Firefox

ОБНОВЛЕНИЕ: это работает (по крайней мере, для меня) в Chrome 15.0.874.121 m.

IE9 и Firefox не должны нуждаться в этом или быть нацелены на него, поскольку селектор указывает -webkit-.