web-dev-qa-db-de.com

Ist die Verwendung der CSS-Regel "text-rendering: optimizelegibility" sicher? auf allen text?

Ich habe dieses woo theme zum Beispiel auf das HTML-Tag gesetzt und daher den gesamten Site-Text gesetzt. Ich habe gelesen, dass es zu Leistungsproblemen kommen kann, aber das war vor einiger Zeit. Einige Leute schlugen vor, es nur zu Kopfzeilen und zu großem Text hinzuzufügen. 

Haben sich die Regeln jetzt geändert? Funktionieren Browser damit gut?

39
firefusion

Nein: Im Laufe der Jahre gab es viele Fehler auf verschiedenen Plattformen, die dazu führen, dass Text nicht oder falsch angezeigt wird (siehe unten). Wenn Sie Ligaturen aktivieren möchten, gibt es die Standardeigenschaft font-variant-ligatures , die in CSS Fonts Level 3 definiert ist und die vollständige Kontrolle bietet:

font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

Unter font-variant finden Sie weitere typografische Funktionen, die aktiviert werden können, wie z. B. Kapitälchen, alternative Briefformulare usw.

Geschichte

Bevor font-variant-ligatures & die zugehörigen Eigenschaften hinzugefügt wurden, erlaubte die ältere font-feature-settings -Eigenschaft die Aktivierung derselben Funktion. Dies ist eine untergeordnete Schnittstelle und wird nicht mehr empfohlen, außer um OpenType-Funktionen zu aktivieren, die keine übergeordnete Schnittstelle haben.

http://blog.fontdeck.com/post/15777165734/opentype-1 hat ein einfaches Beispiel:

h1 {
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/ hat auch mehr Diskussion.

Bug Gallery

Das beliebte HTML5-Boilerplate-Projekt hat es vor zwei Jahren aufgrund verschiedener Darstellungsprobleme entfernt:

https://github.com/h5bp/html5-boilerplate/issues/78

Zwei Chromium-Bugs, die ich heute morgen behoben habe, führten dazu, dass Chrome 21 unter Windows XP überhaupt keine Schriftartersetzung durchführte. Das fehlende Zeichensymbol wurde angezeigt, anstatt eines aus einer anderen Schriftart zu verwenden, und Text, der andere Elemente falsch überlagerte :

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

Siehe http://aestheticallyloyal.com/public/optimize-legibility/ für einige andere Anliegen.

http://bocoup.com/weblog/text-rendering/ hebt Kompatibilitätsprobleme bei Android und allgemeine Leistungsprobleme hervor

32
Chris Adams

aus der MDN text-rendering Seite, zuletzt aktualisiert am 18:27, 29 Apr 2012, heißt es:

Die CSS-Eigenschaft für das Rendern von Text stellt der Rendering-Engine Informationen zur Verfügung, für die optimiert werden soll, wenn Text gerendert wird. Der Browser macht Kompromisse zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die Text-Rendering-Eigenschaft ist eine SVG-Eigenschaft, die in keinem CSS-Standard definiert ist. Mit Gecko- und WebKit-Browsern können Sie diese Eigenschaft jedoch auf HTML- und XML-Inhalte unter Windows, Mac OS X und Linux anwenden. 

das sagt uns, dass es in keinem CSS-Standard definiert ist, was zu browserübergreifenden Problemen führt, wie in der Browserkompatibilität zu sehen ist.

Standardmäßig

Der Browser gibt fundierte Vermutungen darüber ab, wann beim Zeichnen von Text Geschwindigkeit, Lesbarkeit und geometrische Präzision optimiert werden sollen. 

Man kann also davon ausgehen, dass die beste Option darin besteht, dass der Browser sich um solche Details kümmert, da diese Funktion kein Standard ist (noch) und die meisten Browser dies nicht unterstützen.

24
Zuul

text-rendering: optimizeLegibility; wurde in einer unserer Web-Apps verwendet. es wurde in allen Browsern ordnungsgemäß gerendert, mit Ausnahme eines Browsers - chrome (64) unter Windows 7.

Die Eigenschaft musste entfernt werden, da die meisten unserer Endbenutzer aus dieser Kategorie stammten.

7
RoRRe

Ich habe gerade einen Fehler behoben, durch den Chrome sich weigerte, Webfonts zu rendern (es fiel immer auf einen Nicht-Webfont zurück, ohne dass wir einen Grund dafür erkennen konnten). Am Ende wurde das Problem behoben, indem das Text-Rendering von optimizeLegibility (das von Twitter Bootstrap für den Wert festgelegt wurde) auf auto gesetzt wurde. 

Also würde ich für den Moment sagen, die Antwort ist wahrscheinlich "nein". Was nicht zu sagen ist, verwenden Sie es nicht, aber wenden Sie es nicht auf alles an. Verwenden Sie es wo nötig und testen Sie es sorgfältig auf Verrückte oder unerwartete Effekte (besonders in Chrome!).

4
Nick F

die Verwendung von "Text-Rendering: Optimizelegibility" verursacht auch Rendering-Fehler im nativen Android-Browser (4.2 und 4.3). Wenn Sie dieses Attribut in Kombination mit dem Laden neuer Schriftarten über @ font-face verwenden, wird die Schriftart überhaupt nicht angezeigt (nur Fallback). ohne "text-rendering: optimizelegibility" und @ font-face wird die Schriftart geladen und wie erwartet angezeigt.

1
Kris

CSS-Text-Rendering sieht wackelig aus. Anstatt mit schlechten CSS-Eigenschaften zu schleifen, lohnt es sich vielleicht, dies zu tun ...

Wenn Javascript eine Option für Sie ist, sieht Kerning.js vielversprechend aus, ein Javascript-Ansatz für das Kerning und die Kerning-Paare, die auf Github gehostet werden.

http://kerningjs.com

Es ist auch erwähnenswert, wenn Sie sich ernsthaft mit Typografie beschäftigen, gibt es Font Squirrel-freie Web-Fonts.

http://www.fontsquirrel.com

0
unidentified-1