it-swarm.com.de

Anti-Aliasing mit css erzwingen: Ist das ein Mythos?

Kürzlich hat sich ein Kunde über das Erscheinen einer Systemschriftart in IE6 beschwert. Grundsätzlich besteht das Problem darin, dass IE6 kein Glätten von Schriftarten/Anti-Aliasing unterstützt (ich weiß, dass Sie es in einer Betriebssystemeinstellung aktivieren können oder so). Aber jemand hat diesen Edelstein weggeworfen:

Msgstr "Sie können den Schriftarten-Anti-Alias ​​in css erzwingen, indem Sie pt anstelle von px verwenden."

Ich habe einen schnellen POC in verschiedenen Browsern gemacht und sah keinen Unterschied. Ich habe online einen Verweis darauf gefunden, letzter Beitrag in diesem Forum:

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

Das klingt wie das Äquivalent eines städtischen Mythos eines Web-Entwicklers. Mein Gefühl ist BS. Hat jemand schon einmal etwas davon gesehen?

61
FriendOfFuture

Nein, es gibt keine Möglichkeit, dies als Webentwickler zu kontrollieren.

Kleine Ausnahmen sind, dass Sie mit Flash durch sIFR ein falsches Erzwingen von Anti-Aliasing durchführen können. Einige Browser können keine Anti-Alias-Bitmap-/Pixel-Schriftarten verwenden (was nicht der Fall sein sollte, weitere Informationen: Anti.) -Löschung / Anti-Anti-Aliasing ).

Wie Daniel bereits erwähnt hat, ist es ideal, em-Einheiten für alle Schriftarten zu verwenden. Weitere Informationen hierzu finden Sie unter The Incredible Em & Elastic Layouts with CSS .

29
Chad Birch

Oh ja, du kannst:

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

Quelle für Firefox , danke Justin für den Heads Up.

44
Ryan Brodie

Es gibt diese aufregenden neuen Eigenschaften in CSS3:

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

Ich habe immer noch nicht viel mit ihnen selbst getestet und sie werden definitiv für IE nicht gut sein. Könnte für Chrome unter Windows oder vielleicht auch für Firefox nützlich sein. Das letzte Mal, als ich nachgesehen habe, haben sie nicht automatisch kleine Antialias-Sachen wie unter OSX.

UPDATE

Diese werden in IE oder Firefox nicht unterstützt. Die Font-Smooth-Eigenschaft ist, soweit ich mich erinnere, nur in iOS-Safari verfügbar

39

Ich fand eine wirklich umständliche Lösung mit den Zoom- und Filter-ms-only-Eigenschaften Beispiel (versuchen Sie es mit aa, standard und cleartype): http://nadycoon.hu/special/archive/internet-Explorer -force-antialias.html

Wie es funktioniert:

-Vergrößern Sie Text mit Zoom: x, x> 1

-Apply einige Unschärfe (oder andere Filter)

-zoom mit zoom: 1/x

Es ist ein bisschen langsam und sehr! speicherhungrige Methode, und auf nicht-weißen Hintergründen weist sie einen leichten dunklen Halo auf.

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>

Sie können diese kurze jQuery verwenden, um Anti-Aliasing zu erzwingen. Fügen Sie einfach die ieaa-Klasse hinzu:

$(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>'
); });
16
biziclop

Das Hinzufügen der folgenden CSS-Zeile funktioniert für Chrome, nicht jedoch für Internet Explorer oder Firefox.

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

8
Matthew

Ich stimme nicht mit Chad Birch überein. Wir can erzwingen ein Anti-Aliasing, zumindest in Chrome mit einem einfachen CSS-Trick mit der -webkit-text-stroke-Eigenschaft: - 

-webkit-text-stroke: 1px transparent;
7
Salman Abbas

Ich sage es ist ein Mythos.

Der einzige Unterschied zwischen pt-, px- und prozentbasierten Schriftarten besteht darin, was IE skaliert wird, wenn Menü> Ansicht> Textgröße> Einstellung? ist geändert.

IIRC:

  • die px- und pt-basierten Schriftarten werden NICHT skaliert
  • percent-basierte Schriftarten werden in IE gut skaliert

SO VIEL ICH WEISS:

  • Das Anti-Aliasing von Schriftarten wird hauptsächlich durch die Windows-Einstellung für "ClearType" oder im Fall von IE7/IE8 durch die IE-spezifische Einstellung für ClearType gesteuert.
3
scunliffe

Der Fix von px auf pt funktionierte für mich auf einer Website, die eine Schriftart von Google Web Fonts verwendet. Unter Win7 - IE8 wurde das Fehlen von Anti-Aliasing korrekt behoben. 

2
Matt

Ich denke, du hast es ein bisschen falsch verstanden. Jemand in dem Thread, den Sie eingefügt haben, sagt, dass Sie Stop Anti-Aliasing durch Verwendung von px anstelle von pt ausführen können, nicht, dass Sie Force ausführen können mit letzterem. Ich bin allerdings ein bisschen skeptisch gegenüber den beiden Behauptungen ...

2
Deniz Dogan

Bei einer Deckkrafteinstellung von 99% (über die DXTransform-Filter) wird Internet Explorer tatsächlich dazu gezwungen, ClearType mindestens in Version 7 zu deaktivieren. Source

1
Pekka 웃

Ich habe eine Lösung gefunden ...

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

Die umfassendste Lösung kann unter http://www.elfboy.com/blog/text-shadow_anti-aliasing/ gefunden werden. Funktioniert in Firefox und Chrome, obwohl Firefox nicht ganz so effektiv ist wie Chrome.

0

Kein reines CSS, aber nativ unterstützte Methode ohne Font-Ersetzung-Hacks: Konvertieren Sie Ihre Schriftart einfach in SVG und platzieren Sie sie (vor WOFF oder TTF) in @ font-face-Reihenfolge. Voila! Schriftarten sind jetzt glatt, weil sie nicht länger als Schrift behandelt werden, sondern als SVG-Form, die schön geglättet wird.

Hinweis: Ich habe bemerkt, dass SVG mehr als WOFF oder TTF wiegen kann.

0
Pawel

Als Randbemerkung unterstützen Gecko und WebKit das 

text-rendering

eigentum auch.

0
Jbird

Hier ist ein schöner Weg, um Anti-Aliasing zu erreichen:

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

Ich bezweifle, dass ein Browser sowieso dazu gezwungen wird, irgendetwas zu tun. Das hängt von der Systemkonfiguration, der verwendeten Schriftart, den Browsereinstellungen usw. ab. Das klingt für mich auch nach BS.

Verwenden Sie als Anmerkung immer relative Größen, nicht PX.

0
Daniel A. White