CSS를 사용하여 앤티 앨리어싱 강제 : 이것이 신화입니까?

CSS를 사용하여 앤티 앨리어싱 강제 : 이것이 신화입니까?

---

최근 한 클라이언트가 IE6의 시스템 글꼴 모양에 대해 불평했습니다. 기본적으로 문제는 IE6가 글꼴 부드럽게 / 앤티 앨리어싱을 지원하지 않는다는 것입니다 (OS 설정 등에서 켤 수 있음을 알고 있습니다). 그러나 누군가이 보석을 버렸습니다.

"px 대신 pt를 사용하여 CSS에서 글꼴 앤티 앨리어싱을 강제 할 수 있습니다."

다양한 브라우저에서 빠른 POC를 수행했는데 차이가 없었습니다. 이 포럼의 마지막 게시물 인 온라인에서 하나의 참조를 찾았습니다.

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

이것은 웹 개발자 도시 신화에 해당하는 것처럼 들립니다. 제 느낌은 BS입니다. 누군가 그것을 만난 적이 있습니까?

---

아니요, 웹 개발자로서이를 제어 할 수있는 방법은 없습니다.

작은 예외는 sIFR을 통해 Flash를 사용하여 앤티 앨리어싱을 가짜로 강제 할 수 있다는 것입니다. 일부 브라우저는 비트 맵 / 픽셀 글꼴을 앤티 앨리어싱 하지 않습니다 (그렇지 않아야하므로 더 많은 정보 : 앤티 앨리어싱 / 안티 앤티 -Aliasing ).

또한 Daniel이 언급했듯이 em모든 글꼴에 단위를 사용하는 것이 이상적입니다 . 이에 대한 자세한 내용 은 The Incredible Em & Elastic Layouts with CSS 를 참조하십시오.

---

네, 가능합니다 :

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

Firefox 용 소스 , 저스틴 에게 감사드립니다 .

---

CSS3에는 다음과 같은 흥미로운 새 속성이 있습니다.

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

그래도 그들과 함께 많은 테스트를 수행하지 않았으며 거의 ​​확실히 IE에 좋지 않을 것입니다. Windows 또는 Firefox의 Chrome에 유용 할 수 있습니다. 마지막으로 확인했을 때 OSX에서와 같이 작은 항목을 자동으로 안티 앨리어싱하지 않았습니다.

최신 정보

IE 또는 Firefox에서는 지원되지 않습니다. font-smooth 속성은 내가 기억하는 한 iOS 사파리에서만 사용할 수 있습니다.

---

확대 / 축소 및 필터 ms 전용 속성을 사용하여 정말 어색한 솔루션을 찾았습니다. 예 (AA, 표준 및 cleartype없이 시도) : http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

작동 원리 :

-zoom : 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;

---

나는 Chad Birch에 동의하지 않습니다. 우리가 할 수 있는 최소한 앤티 앨리어싱을 강제로 크롬 간단한 CSS 트릭 사용하여 -webkit-text-stroke속성을 : -

-webkit-text-stroke: 1px transparent;

---

나는 그것이 신화라고 말한다.

pt, px 및 백분율 기반 글꼴 간의 유일한 차이점은 메뉴>보기> 텍스트 크기>? 설정? 변경됩니다.

IIRC :

• px및 pt글꼴과 확장되지 않습니다
• percent IE에서 기반 글꼴 크기 조정

AFAIK :

• 글꼴 앤티 앨리어싱은 대부분 "ClearType"의 경우 Windows 설정 또는 IE7 / IE8의 경우 ClearType.

---

I think you got it a bit wrong. Someone in the thread you pasted says that you can stop anti-aliasing by using px instead of pt, not that you can force it by using the latter. I'm a bit sceptical to both of the claims though...

---

The px to pt fix worked for me on a site that uses a font from Google Web Fonts. On Win7 - IE8 it correctly fixed the lack of anti-alias rendering.

---

Using an opacity setting of 99% (through the DXTransform filters) actually forces Internet Explorer to turn off ClearType, at least in Version 7. Source

---

I doubt there is anyway to force a browser to do anything. It would depend on the system configuration, the font used, browser settings, etc. It sounds like BS to me too.

As a note, always use relative sizes not PX.

---

Seems like the most exhaustive solution can be found at http://www.elfboy.com/blog/text-shadow_anti-aliasing/. Works in Firefox and Chrome, although Firefox is not quite as effective as Chrome.

---

As a side note, Gecko and WebKit support the the

text-rendering

property as well.

---

Not a pure CSS but natively supported method without any font replacement hacks: Simply convert your font to SVG and place it higher(before WOFF or TTF) in @font-face order. Voila! Fonts are smooth now, because they're no longer treated as a font but an SVG shape which will be nicely smoothened.

Note: I noticed that SVG can weight more than WOFF or TTF.

---

Here's a nice way to achieve anti-aliasing:

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

---

I found a fix...

.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! */
        }  

참고URL : https://stackoverflow.com/questions/761778/forcing-anti-aliasing-using-css-is-this-a-myth