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



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



" вы можете заставить шрифт анти-псевдоним в css с помощью pt вместо px."



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



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



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

1468   16  

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.

в качестве примечания, геккон и WebKit поддерживают the

text-rendering

собственность, а также.

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

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

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

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

Я нашел решение проблемы...

.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

    Ничего не найдено.