Come viene calcolata la dimensione del carattere?

Question

Ho un complesso js funzione con un'equazione in cui ho effettivamente bisogno di capire quanto spazio in pixel font di dimensioni occupano.

Ho notato che le dimensioni un po 'di carattere sono diverse a seconda del tipo di carattere.

Come si calcola la dimensione di un font? Se il suo set a 12px, in CSS, cosa significa il 12px? È che larga 12px? Alta? O è una misura di pixel in diagonale?

Answer 1

Vedere la spec :

  

Le dimensioni dei caratteri corrisponde al em   piazza, un concetto usato in tipografia.
  Si noti che alcuni glifi possono sanguinare   fuori delle loro piazze em.

Answer 2

L'altezza è la misura standard

altezza

caratteri viene misurato o specificato per l'altezza di una linea, che è l'altezza necessaria per visualizzare la gamma di caratteri, inclusi quelli che scendere sotto la linea, come j, e gli elementi in rilievo (accenti sulle capitali, ad esempio ) come Ê.

_{(fonte: banzaimonkey.net )}

Font in ordine di apparizione:. Times New Roman, Courier New, Calibri, Consolas

Larghezza

Larghezza di glifi varia tra i tipi di carattere, come potete vedere nell'immagine sopra. V'è anche una importante distinzione tra font proporzionali e fixed-width. Per font a larghezza fissa, lo spazio ogni carattere occupa sulla linea è esattamente lo stesso (se i caratteri stessi possono non essere del tutto le stesse dimensioni di un altro. Per i caratteri proporzionali, lo spazio ogni usi carattere è più in linea con la sua forma, rispetto ad altri caratteri, quindi i , j e l sono vari stretti, mentre w , m e o sono in genere più ampia.

Font

font stessi rendono glifi in modi diversi (ovviamente, in quanto i caratteri aspetto diverso), e questo significa che un carattere particolare, non sarà necessariamente rendere la stessa altezza tra i caratteri. E significa anche che non c'è modo standard per capire quanto alto un certo carattere potrebbe essere in qualsiasi formato, a parte il rendering del tipo di carattere.

Probabilmente non è ovvio per la maggior parte, ma se si esaminano i termini di licenza per i font si noterà che stanno in licenza come font software . In sostanza, ogni carattere contiene una serie di algoritmi che determinano come il carattere deve essere resa in un dato contesto (varie dimensioni, grassetto, corsivo, ecc.).

Di conseguenza, il modo migliore per capire come un carattere renderà in un dato contesto è rendere e vedere.

Problemi di dimensionamento

Ci sono alcune avvertenze per dimensioni di carattere, quando hai a che fare con le cose sul web.

Per il Web

Come ogni progettista di buon web conosce, non le cose sono uguali. Ci sono innumerevoli variabili che entrano in gioco durante il rendering di una pagina che può provocare differenze tra gli utenti, come ad esempio il browser, caratteri predefiniti, zoom, levigante, accennando, il ridimensionamento del browser, il ridimensionamento del sistema operativo, ecc.

A List Apart (prima hanno saltato lo squalo) ha alcuni buoni articoli su standardizzare le dimensioni dei caratteri e ti aiuta a ottenere alcuni livello di somiglianza tra i browser:

• Size Matters
• relative dimensioni carattere
• Testo Ridimensiona Detection
• Impostazione del tipo sul Web per una griglia linee di base

Mentre si può fare la vostra dovuta diligenza, si dovrà solo accettare che il mezzo web comporta un certo grado di variabilità che non si può controllare.

Stampa vs. Pixel

Poiché i pixel non sono tipicamente una scala naturale per i font (diverse misurazioni sono utilizzati per la stampa), gli algoritmi accennando possono rendere font fuori da un pixel o due, in particolare di piccole dimensioni, al fine di mantenere la forma dei caratteri.

In realtà, l'algoritmo accennando è spesso completamente diversa di piccole dimensioni, e nel lavoro professionale si sarebbe probabilmente utilizza un carattere completamente diverso per le dimensioni inferiori a 12pt.

I pixel sono anche in relazione alla dimensione del display,così 12px sarà una grandezza fisica differente su questi schermi:

• monitor da 20" a 1680x1050
• 22" del monitor a 1680x1050
• schermo di iPhone
• schermo Blackberry
• ecc.

TL; DR

Quindi, in sintesi, è complicato. font-size si riferisce all'altezza necessaria per visualizzare la gamma di personaggi, ma in natura e internet lanoso, ci sono sempre delle eccezioni.

Answer 3

Questa è una risposta supplementare. Ho trovato il grafico da questo sito molto utile per ottenere una grande comprensione dell'immagine.

Answer 4

Per le specifiche ( http://www.w3.org/TR/CSS2 /fonts.html )

  

Le dimensioni dei caratteri corrisponde al em   quadrato, un concetto usato in tipografia.   Si noti che alcuni glifi possono sanguinare   fuori delle loro piazze em.

La dimensione del riquadro em ha spiegato: http://www.emdpi.com/emsquare.html

Answer 5

Si dovrebbe usare .getClientRects() se è necessario sapere quanto spazio una sequenza di testo si / ci vorrà per visualizzare sullo schermo.

L'interazione reale tra ciò che si imposta e di che dimensioni si otterrà è un po 'complicato. Il CSS3 spec mette più chiaramente che le specifiche CSS2 citato in altre risposte:

  

Questa proprietà indica l'altezza desiderata dei glifi del font.   Per i font scalabili, il font-size è un fattore di scala applicato alla EM   Unità del carattere.

In sostanza, è possibile controllare la dimensione della "em piazza". Le forme dei font sono definiti relativamente a questo, ma certamente può allontanarsi fuori / all'interno di questa scatola (a volte in modo significativo).

E questo è solo l'inizio! Anche se si assume un carattere che è compensata molto da vicino a questo em-square - stai solo andando a moltiplicare la lunghezza della stringa da questo formato? A meno che non spaziatura fissa e il testo è ASCII-solo, hai un sacco di cui preoccuparsi: diverse larghezze di carattere, la crenatura e legature, comportamenti confezionamento, e, naturalmente, altri avvertimenti anche semplici "della lunghezza della corda", come le schede, Unicode caratteri combinando e codici di controllo .