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

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

Вот эти захватывающие новые свойства в CSS3:

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

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

UPDATE

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

Ответ 4

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

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

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

- коснитесь смазанности (или любого другого фильтра)

-zoom вниз с увеличением: 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>'
); });

Ответ 5

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

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

Ответ 6

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

-webkit-text-stroke: 1px transparent;

Ответ 7

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

Ответ 8

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

Единственное различие, которое я нашел между шрифтами pt, px и процентов, - это то, что IE будет масштабироваться, когда в меню > Вид > Размер текстa > ? Настройка? изменяется.

IIRC:

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

AFAIK:

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

Ответ 9

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

Ответ 10

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

Ответ 11

Я сомневаюсь, что в любом случае заставить браузер делать что-либо. Это будет зависеть от конфигурации системы, используемого шрифта, настроек браузера и т.д. Для меня это тоже похоже на BS.

В качестве примечания всегда используйте относительные размеры, а не PX.

Ответ 12

Похоже, самое исчерпывающее решение можно найти на http://www.elfboy.com/blog/text-shadow_anti-aliasing/. Работает в Firefox и Chrome, хотя Firefox не так эффективен, как Chrome.

Ответ 13

В качестве дополнительной заметки Gecko и WebKit поддерживают

text-rendering

.

Ответ 14

Не чистый CSS, а способ, основанный на принципе поддержки без каких-либо заменяющих шрифтов: Просто конвертируйте свой шрифт в SVG и поместите его выше (до WOFF или TTF) в порядке @font-face. Вуаля! Шрифты теперь гладкие, потому что они больше не рассматриваются как шрифт, а форма SVG, которая будет хорошо сглажена.

Примечание. Я заметил, что SVG может весить больше, чем WOFF или TTF.

Ответ 15

Здесь хороший способ добиться сглаживания:

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

Ответ 16

Я нашел исправление...

.text {
            font-size: 15px;  /* for firefox */
            *font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
            font-weight: bold; /* needed, don't know why! */
        }  

Ответ 17

Не уверен, что ответ Matt text-shadow был отклонен. Я применил этот стиль к заголовкам, в которых я использую Typekit, и это, безусловно, улучшило внешний вид. Он работал не только в Chrome, как он упоминал, но и в Firefox 3.6.8.