In che modo i valori della dimensione dei font vengono convertiti nei rendering CSS tra i browser?

Question

I CSS em sono un ottimo strumento, ma ci sono cose che mi hanno sempre infastidito, probabilmente perché non li capisco completamente.

I caratteri non vengono visualizzati correttamente a ogni dimensione e, in particolare, a valori inesatti. Ecco perché, se si vuole dare utilizzando em valori esatti pixel per i font, devi fare le cose come (supponendo che non ha cambiato la dimensione del font 16px del corpo):

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

Forse voleva solo per aumentare le dimensioni un po ', ma poi rendersi conto che 0.9em = 14.4px, e poi ti sei spaventato il tuo carattere potrebbe sembrare sfocato! In ogni caso, se si specifica un paragrafo font-size di 1.25em (18px) e quindi si modifica la dimensione del corpo da 16px a 14px, il paragrafo sarà 17.5px. Di nuovo sfocato!

Supponendo che stiamo lavorando su comuni schermi a razione 1x come quelli desktop, come sarebbe, ad esempio, il rendering di un font 11.5px? Li ho stampati su un file html di prova e sembrano esattamente come un font 12px. Ma questo è il comportamento consigliato tra tutti i browser? E per quanto riguarda le dimensioni come padding e margine che possono essere determinate dalla dimensione del font quando si utilizza ems? Vengono anche arrotondati?

MODIFICA: Ho fatto un confronto tra i rendering su 3 browser di sindaco. Eccolo:

ho scalato l'alto (200%) un po ', in modo che sia più facile vedere i dettagli. In alto, puoi vedere come lo stesso testo esegue il rendering a 14px (a sinistra) e 14,4px (a destra). Di seguito, li ho sovrapposti a Photoshop usando la modalità di fusione Differenza per vedere se c'è qualche differenza. Come puoi vedere, Chrome arrotonda la dimensione del carattere e lo rende alla stessa dimensione, mentre l'altezza della scatola è diversa. Firefox ha la stessa altezza ma il rendering del font è leggermente diverso sull'asse x, mentre l'altezza del carattere sembra uguale. Il risultato di IE è una specie di mix. In ogni caso, sono davvero sorpreso perché il font 14.4px non sembra essere affatto blured.

Answer 1

Ma questo è il comportamento consigliato tra tutti i browser?

Ecco cosa ho trovato su w3.org

Il pixel di riferimento è l'angolo visuale di un pixel su un dispositivo con una densità di pixel di 96 dpi e una distanza dal lettore di lunghezza di un braccio. Per una lunghezza nominale del braccio di 28 pollici, l'angolo visivo è quindi di circa 0,0213 gradi. Per la lettura a lunghezza di braccio, 1px corrisponde quindi a circa 0,26 mm (1/96 di pollice).

Quindi 1px non corrisponde necessariamente l'1 pixel sullo schermo, vedi immagine qui sotto:

Quindi, anche se si potrebbe calcolare sulla base di 0.25px (utilizzando il valore di pixel di cui sopra), per spostare gli elementi da 1 letterale pixel dello schermo, non è fatto.

E per quanto riguarda le dimensioni come padding e margine che possono essere determinate dalla dimensione del carattere quando si utilizza ems? Vengono anche arrotondati?

Check out this question, può essere utile. Fondamentalmente i valori sono arrotondati. Il motivo per cui il tuo 11.5px era lo stesso di 12px perché era stato arrotondato per eccesso. 11.4px apparirebbe come 11px

Anche guardare this website, fornisce un comportamento interessante su come funziona.

Vedere il frammento di codice sotto un esempio. Vedere come il div solo si spostato verso il basso di un pixel su translateY(0.5px), questo dimostra il browser arrotonda il valore:

.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

Non è una domanda semplice e non si applica "esattamente" per il browser . È più una domanda su tutti i sistemi di rendering utilizzati e su "spazi continui rispetto a spazi discreti" o "tracciare una curva utilizzando caselle quadrate".

Alcuni testi che potrebbero aiutare ad avere una migliore comprensione circa la domanda:

(Prova i risultati di google ricerche "font rendering spazio discreto", "sub-pixel rendering dei font", o "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

un comportamento "giusto" è difficile da definire qui, e così un "comportamento predefinito" diventa quasi impossibile. È una domanda matematica sullo spazio e sulla percezione umana più che sul comportamento dei browser o CSS.

... in ogni caso, il comportamento descritto su "spostamento di 1 pixel" è correlato alla tecnica di suggerimento dei caratteri utilizzata dal browser o dal sistema.

Answer 3

questa non è una domanda davvero di tufo è necessario definire css in modo gerarchico

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

    } 

questo è il vostro valore div si supponga di avere un altro tag titolo nel contenuto scatola.

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

solo semplice

more info