Принудительное сглаживание с помощью css: это миф?

Question

Недавно клиент пожаловался на появление системного шрифта в IE6. В основном проблема заключается в том, что IE6 не поддерживает сглаживание шрифтов / сглаживание (я знаю, вы можете включить его в настройках ОС или что-то в этом роде). Но кто-то выбросил этот камень:

"Вы можете принудительно установить псевдоним шрифта в css, используя pt вместо px."

Я сделал быстрый POC в разных браузерах и не увидел никакой разницы. Я нашел одну ссылку на это онлайн, последнее сообщение на этом форуме:

http://www.webmasterworld.com/css/3280638.htm

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

Answer 1

О, да, вы можете:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

Источник для Firefox , спасибо Джастин за голову.

Answer 2

В CSS3 есть новые интересные свойства:

font-smooth:always;
-webkit-font-smoothing: antialiased;

Тем не менее, я пока не проводил с ними много испытаний, и они почти наверняка не будут полезны для IE. Может быть полезно для Chrome на Windows или, возможно, Firefox. В прошлый раз, когда я проверял, они не сглаживали мелочи автоматически, как в OSX.

UPDATE

Они не поддерживаются в IE или Firefox. Насколько я помню, свойство font-smooth доступно только в iOS-сафари

Answer 3

Нет, на самом деле нет никакого способа контролировать это как веб-разработчик.

Небольшие исключения заключаются в том, что вы можете выполнить некоторое принудительное принудительное сглаживание с помощью Flash через sIFR , а некоторые браузеры не будут использовать растровые / пиксельные шрифты с псевдонимами (как это не должно быть, более информация: Сглаживание / Сглаживание ).

Кроме того, как отметил Дэниел, идеально использовать единицы em для всех шрифтов, см. Невероятные Em & Elastic Layouts с CSS для получения дополнительной информации об этом.

Answer 4

Я нашел очень неловкое решение, используя свойства масштабирования и фильтрации только для ms Пример (попробуйте без aa, standard и cleartype): http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

Как это работает:

- увеличение текста с увеличением: x, x> 1

- применить размытие (я) (или любой другой фильтр)

- уменьшение с увеличением: 1 / x

Это немного медленно и очень! метод, требующий памяти, и на небелых фонах он имеет небольшой темный ореол.

CSS:

.insane-aa-4b                  { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur  { zoom:1;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}

HTML:

<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
  <div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>

Вы можете использовать этот короткий jQuery для принудительного сглаживания, просто добавьте класс ieaa к чему-либо:

$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });

Answer 5

Добавление следующей строки CSS работает для Chrome, но не для Internet Explorer или Firefox.

text-shadow: #fff 0px 1px 1px;

Answer 6

Я не согласен с Чедом Бёрчем. Мы можем принудительно применить сглаживание, по крайней мере, в Chrome , используя простой трюк CSS со свойством -webkit-text-stroke: -

-webkit-text-stroke: 1px transparent;

Answer 7

Я говорю, это миф.

Единственное различие, которое я обнаружил между шрифтами на основе pt, px и процентов, заключается в том, что IE будет масштабироваться, когда Menu> View> Text Size>? Setting? изменено.

IIRC:

• шрифты px и pt НЕ будут масштабироваться
• percent Масштабирование шрифтов на основе IE в IE просто отлично

AFAIK:

• Сглаживание шрифта в основном управляется настройкой Windows для "ClearType" или в случае IE7 / IE8 специфичной для IE настройкой ClearType.

Answer 8

Исправление px в pt мне помогло на сайте, который использует шрифт из Google Web Fonts. На Win7 - IE8 исправлено отсутствие рендеринга сглаживания.

Answer 9

Я думаю, вы немного ошиблись. Кто-то из вставленной вами ветки говорит, что вы можете остановить сглаживание, используя px вместо pt, но не можете принудительно использовать его с помощью последнего. Я немного скептически отношусь к обеим претензиям ...

Answer 10

Использование параметра непрозрачности 99% (через фильтры DXTransform) фактически заставляет Internet Explorer отключить ClearType, по крайней мере, в версии 7. Источник