@font-face сглаживание на окнах и мак

Ответ 1

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

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

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

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

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

но я серьезно не рекомендую его.)

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

Ответ 2

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

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

@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;
}

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

Ответ 3

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

-webkit-text-stroke: 0.5px;

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

Трюк с

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

или

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

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

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

Ответ 7

Это код im, используемый для исправления "проблемы рендеринга 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');
    }
}

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

Ответ 8

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

Обновление: больше не работает в Chrome 15.0.874.106 m. Хотя он работает в IE9 и Firefox → Zequez 4 ноября в 15:28

UPDATE: работает (по крайней мере для меня) в Chrome 15.0.874.121 м.

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