Принудительное сглаживание с помощью css: это миф?
недавно клиент пожаловался на появление системного шрифта в IE6. В основном проблема заключается в том, что IE6 не поддерживает сглаживание/сглаживание шрифтов (я знаю, что вы можете включить его в настройках ОС или что-то еще). Но кто-то выбросил этот перл:
" вы можете заставить шрифт анти-псевдоним в css с помощью pt вместо px."
Я сделал быстрый POC в различных браузерах и не видел никакой разницы. Я нашел одну ссылку на него в интернете, последний пост на этом форум:
http://www.webmasterworld.com/css/3280638.htm
Это звучит как эквивалент городского мифа веб-разработчика, я чувствую, что это BS. Кто-нибудь сталкивался с этим?
16 ответов:
нет, на самом деле нет никакого способа контролировать это как веб-разработчик.
небольшие исключения заключаются в том, что вы можете сделать некоторые поддельные форсирование сглаживания с помощью Flash through sIFR, и некоторые браузеры не будут использовать растровые/пиксельные шрифты с анти-псевдонимами (поскольку они не должны, дополнительная информация:Анти-Алиасинг/Анти-Анти-Алиасинг).
кроме того, как упоминал Даниэль, идеально использовать
emединицы измерения для всех шрифтов, см. Невероятные Эм & Эластичные макеты с CSS для получения дополнительной информации об этом.
да можно:
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased;источник для Firefox, спасибо Джастин за головы.
есть эти захватывающие новые свойства в CSS3:
font-smooth:always; -webkit-font-smoothing: antialiased;все еще не сделал много испытаний с ними сам, хотя, и они почти наверняка не будет никакой пользы для IE. Может быть полезно для Chrome на Windows или, возможно, Firefox, хотя. В последний раз, когда я проверял, они не делали небольшие вещи antialias автоматически, как они делают в OSX.
обновление
они не поддерживаются в IE или Firefox. Свойство font-smooth доступно только в iOS safari насколько я помню
Я нашел действительно неудобное решение, используя свойства масштабирования и фильтра ms-only Пример (попробуйте без 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>' ); });
добавление следующей строки CSS работает для Chrome, но не Internet Explorer или Firefox.
text-shadow: #fff 0px 1px 1px;
Я не согласен с чадом Берчем. Мы можете группы сглаживания, по крайней мере, в хром используя простой трюк css с
-webkit-text-strokeимущество:--webkit-text-stroke: 1px transparent;
Я думаю, что вы немного ошиблись. Кто-то в потоке, который вы вставили, говорит, что вы можете остановка сглаживание с помощью
pxвместоpt, Не то, что вы можете силу С помощью последнего. Хотя я немного скептически отношусь к обоим заявлениям...
Я говорю, что это-миф.
единственное различие, которое я нашел между pt, px и шрифтами на основе процентов, заключается в том, что IE будет масштабироваться, когда меню > Вид > размер текста > ?Установка? меняется.
IIRC:
- the
pxиptшрифты на основе не будут масштабироватьсяpercentмасштаб шрифтов на основе IE просто отличноAFAIK:
- сглаживание шрифта в основном контролируется windows установка для
"ClearType"или в случае IE7 / IE8 настройка IE дляClearType.
исправление px to pt работало для меня на сайте, который использует шрифт из веб-шрифтов Google. На Win7-IE8 он правильно исправил отсутствие рендеринга анти-псевдонимов.
использование параметра непрозрачности 99% (через фильтры DXTransform) фактически заставляет Internet Explorer отключить ClearType, по крайней мере, в версии 7. источник
Я сомневаюсь, что есть в любом случае, чтобы заставить браузер делать что-либо. Это будет зависеть от конфигурации системы, используемого шрифта, настройки браузера и т. д. Это звучит как BS для меня тоже.
в качестве примечания всегда используйте относительные размеры, а не PX.
кажется, что наиболее исчерпывающее решение можно найти в http://www.elfboy.com/blog/text-shadow_anti-aliasing/. работает в Firefox и Chrome, хотя Firefox не так эффективен, как Chrome.
не чистый CSS, но изначально поддерживаемый метод без каких-либо хаков замены шрифтов: Просто преобразуйте свой шрифт в SVG и поместите его выше(перед WOFF или TTF) в порядке @font-face. Вуаля! Шрифты теперь гладкие, потому что они больше не рассматриваются как шрифт, а форма SVG, которая будет хорошо сглажена.
Примечание: я заметил, что SVG может весить больше, чем WOFF или TTF.
Я нашел решение проблемы...
.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! */ }
Comments