@ font-face сглаживание на Windows и Mac - PullRequest
Новая
       43

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

25 голосов
/ 31 октября 2010

Я использовал http://www.fontsquirrel.com/ для создания комплекта @ font-face.
Работает нормально, но результат на окнах отличается от результата на Mac.
На окнах кажется, что шрифтиметь неправильное сглаживание:
Font face on Mac это результат на Mac с FF, Chrome или Safari (все обновлены до последней версии).
Font face on Windows это результат на Windows с FF или Chrome,

Как видите, результат не тот.В Windows шрифт толще и грубее.
Как я могу решить эту проблему?

Ответы [ 8 ]

48 голосов
/ 28 января 2012

Меня тоже мучает это на 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;
}

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

14 голосов
/ 30 ноября 2012

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

-webkit-text-stroke: 0.5px;

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

8 голосов
/ 31 октября 2010

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

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

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

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

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

, но я серьезно не рекомендовал бы это.)

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

4 голосов
/ 01 ноября 2010

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

3 голосов
/ 16 января 2011

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

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

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

2 голосов
/ 21 февраля 2013

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

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

2 голосов
/ 14 декабря 2011

Изменение настроек в 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.

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

0 голосов
/ 23 ноября 2011

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

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

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

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

...