Wie lassen sich Font-Size-Werte auf CSS-Darstellung zwischen Browsern verschieben?

Question

CSS em sind ein großartiges Werkzeug, aber es gibt Dinge, die mich immer genervt haben, wahrscheinlich, weil ich sie nicht vollständig verstehe.

Schriftarten werden nicht bei jeder Größe richtig wiedergegeben, besonders schlecht bei ungenauen Werten. Deshalb, wenn Sie em genaue Pixelwerte Schriften geben mit wollen, müssen Sie die Dinge tun wie (Sie unter der Annahme, ändern nicht die 16px Schriftgröße des Körpers):

font-size: 0.875em; /* 14px */ 
font-size: 1.25em; /* 18px */ 

Vielleicht nur Sie wollten um die Größe ein wenig zu erhöhen, aber dann erkannte, dass 0.9em = 14.4px, und dann haben Sie Angst, Ihre Schriftart kann verschwommen aussehen! In jedem Fall, wenn Sie einen Absatz font-size1.25em (18px) geben, und ändern Sie dann die Körpergröße von 16px zu 14px, dann wäre der Absatz 17.5px. Verschwommen wieder!

Angenommen, wir arbeiten an gemeinsamen 1x Ration Screens wie Desktops, wie würde zum Beispiel eine 11.5px Schrift rendern? Ich habe sie auf eine Test-HTML-Datei gedruckt und sie scheinen genau wie eine 12px Schriftart aussehen. Aber ist dies das empfohlene Verhalten unter allen Browsern? Und was ist mit Größen wie Padding und Rand, die bei der Verwendung von ems durch die Schriftgröße bestimmt werden können? Werden sie auch zusammengetrieben?

EDIT: Ich habe einen Vergleich zwischen den Renderings auf 3 großen Browsern gemacht. Hier ist sie:

ich es skaliert (200%) ein wenig, so dass es einfacher ist, um die Details zu sehen. Oben sehen Sie, wie der gleiche Text bei 14px (links) und 14,4px (rechts) rendert. Unten habe ich sie auf Photoshop mit dem Differenz-Mischmodus überlagert, um zu sehen, ob überhaupt ein Unterschied besteht. Wie Sie sehen, rundet Chrome die Schriftgröße ab und rendert sie in der gleichen Größe, während die Höhe der Box unterschiedlich ist. Firefox hat dieselbe Höhe, aber die Schrift rendert sich leicht auf der x-Achse, während die Höhe der Schrift gleich erscheint. IE Ergebnis ist eine Art Mischung. Auf jeden Fall bin ich wirklich überrascht, denn die 14.4px-Schrift scheint überhaupt nicht verwaschen zu sein.

Answer 1

Aber ist dies das empfohlene Verhalten unter allen Browsern?

Hier ist das, was ich auf w3.org

das Referenzpixel gefunden ist der Sichtwinkel eines Pixels auf einem Gerät mit einer Pixeldichte von 96 dpi und einem Abstand von dem Leser einer Armlänge. Für eine nominelle Armlänge von 28 Zoll beträgt der Sichtwinkel daher etwa 0,0213 Grad. Zum Lesen auf Armlänge entspricht 1px somit etwa 0,26 mm (1/96 Zoll).

So ist 1px nicht unbedingt entsprechen den 1 Pixel auf dem Bildschirm, siehe Bild unten:

Also auch wenn Sie auf 0.25px Basis berechnen konnte (über den Pixelwert verwendet wird), um Elemente bewegen sich von 1 wörtlichen Bildschirmpixel ist es nicht getan.

Und was ist mit Größen wie Padding und Rand, die bei der Verwendung von ems durch Schriftgröße bestimmt werden können? Werden sie auch zusammengetrieben?

Auschecken this question, kann es von Nutzen sein. Grundsätzlich sind die Werte gerundet. Der Grund, warum Ihr 11.5px genauso aussah wie war, weil es aufgerundet wurde. 11.4px würde genau so aussehen 11px

Schauen Sie sich auch this website, bietet es einige interessante Verhalten, wie dies funktioniert.

Sehen Sie sich das Code-Snippet unter einem Beispiel an. Sehen Sie, wie das div wird von einem Pixel auf translateY(0.5px), dies beweist den Browser rundet den Wert nur nach unten verschoben:

.box { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #FF0000; 
 
    display: inline-block; 
 
} 
 
#cont { 
 
    outline: 1px solid #000; 
 
    display: inline-block; 
 
}

<div id="cont"> 
 
    <div class="box" style="transform: translateY(0.1px)"></div> 
 
    <div class="box" style="transform: translateY(0.2px)"></div> 
 
    <div class="box" style="transform: translateY(0.3px)"></div> 
 
    <div class="box" style="transform: translateY(0.4px)"></div> 
 
    <div class="box" style="transform: translateY(0.5px)"></div> 
 
    <div class="box" style="transform: translateY(0.6px)"></div> 
 
    <div class="box" style="transform: translateY(0.7px)"></div> 
 
    <div class="box" style="transform: translateY(0.8px)"></div> 
 
    <div class="box" style="transform: translateY(0.9px)"></div> 
 
    <div class="box" style="transform: translateY(1.0px)"></div> 
 
</div>

Answer 2

Es ist nicht eine einfache Frage und gilt nicht „genau“ an den Browser . Es ist eher eine Frage zu den gesamten verwendeten Rendering-Systemen und zu "kontinuierlichen Räumen vs. diskreten Räumen" oder "zeichne eine Kurve mit quadratischen Kästen".

Einige Texte, die ein besseres Verständnis zu haben, um die Frage helfen könnte:

(Versuchen Ergebnisse von Google searchs "font-Rendering diskreten Raum", "Sub-Pixel-Schriftwiedergabe" oder "Font-Hinting")

http://jcgt.org/published/0002/01/04/paper.pdf http://www.cutebugs.net/files/curve/fabris97antialiasing.pdf http://lspwww.epfl.ch/publications/typography/frsa.pdf https://www.grc.com/ctwho.htm

A "richtiges" Verhalten schwierig ist, hier zu definieren, und so wird ein "Standardverhalten" fast unmöglich. Es ist eine mathematische Frage über Raum und menschliche Wahrnehmung mehr als über Browserverhalten oder CSS.

... das beschriebene Verhalten über "1 Pixel bewegen" hängt mit der Schriftart-Technik zusammen, die der Browser oder das System verwendet.

Answer 3

ist dies kein wirklich Tuff Frage, die Sie CSS in einer hierarchischen Weise

.box{ 
     font-size: 1em; /* size according to your*/ 

    } 

ist dies Ihr div Wert: Angenommen, Sie haben eine andere Überschrift-Tag in Ihrem Feld Inhalt definieren müssen.

.box h2{font-size:14px; } 

nur einfache

more info