Принудительное сглаживание с использованием 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.