15 Font [o insiemi di caratteri]

Sommario

15.1 Introduzione

Quando il testo di un documento deve essere mostrato visivamente, i caratteri (elementi di informazione astratti) devono essere correlati con glifi astratti [glyph, rappresentazione grafica di un carattere o "glifo"]. Uno o più caratteri possono essere rappresentati da uno o più glifi astratti, in un modo possibilmente dipendente dal contesto. Un glifo è l'effettiva rappresentazione artistica di un glifo astratto, in un qualche stile tipografico, nella forma di contorni o bitmap che possono essere tracciati sullo schermo o sulla carta. Un font è un insieme di glifi, tutti osservanti il medesimo motivo di base secondo il disegno, le dimensioni, l'aspetto, ed altri attributi associati con l'intero insieme, ed una correlazione fra caratteri e glifi astratti.

Un programma utente visuale deve soffermarsi sui seguenti problemi prima di rendere effettivamente un carattere:

Sia nei CSS1 che nei CSS2, gli autori specificano le caratteristiche dei font tramite una serie di proprietà dei font.

Il modo in cui il programma utente gestisce queste proprietà, quando non vi è corrispondenza di font sul pc dell'utente, è stato ampliato dai CSS1 ai CSS2. Nei CSS1, si presupponeva che tutti i font fossero presenti sul sistema dell'utente e venivano identificati solamente per nome. Font alternativi potevano essere specificati attraverso le proprietà ma, al di là di questo, i programmi utente non avevano alcun modo di proporre altri font all'utente (anche font stilisticamente simili che il programma utente aveva a disposizione) eccetto font generici predefiniti.

I CSS2 hanno cambiato tutto questo, permettendo molta più libertà per:

I CSS2 migliorano la corrispondenza di font lato client [client-side], abilitano la sintesi di font e la resa progressiva, e fanno in modo che i font possano essere scaricati dal Web. A queste capacità avanzate ci riferiamo come 'WebFonts'.

Nel modello font dei CSS2, come nei CSS1, ciascun programma utente ha un "database di font" a sua disposizione. I CSS1 facevano riferimento a questo database ma non davano dettagli sul suo contenuto. I CSS2 definiscono le informazioni presenti in quel database e permettono ai fogli di stile degli autori di contribuirvi. Quando riceve la richiesta di visualizzare un carattere con un particolare font, il programma utente come prima cosa identifica il font nel database che "meglio si adatta" al font specificato (secondo l'algoritmo di corrispondenza dei font). Una volta identificato un font, recupera i dati del font localmente o dal Web, e può visualizzare il carattere usando quei glifi.

Alla luce di questo modello, abbiamo organizzato questo capitolo delle specifiche in due sezioni. La prima riguarda il meccanismo per specificare i font, ossia come gli autori specificano quali font vorrebbero usare. La seconda riguarda il meccanismo per selezionare i font, ossia come il programma utente del client identifica e carica un font che meglio si adatta alle specifiche dell'autore.

Il modo con cui il programma utente costruisce il database dei font va oltre l'àmbito di queste specifiche, poichè l'implementazione del database dipende da fattori quali il sistema operativo, il sistema di organizzazione a finestre, e il client.

15.2 Come specificare i font

La prima fase del meccanismo dei font dei CSS riguarda il modo in cui i fogli di stile degli autori specificano quali font dovrebbero essere usati da un programma utente. Sembra da subito che un'ovvia modalità per specificare un font sia quella di specificarlo per nome, con una singola stringa - che appare separata in due parti distinte; per esempio "BT Swiss 721 Heavy Italic".

Sfortunatamente non esiste una tassonomia di classificazione dei font in base al nome che sia ben definita ed universalmente accettata, e i termini che si applicano ad un nome di famiglia di font possono non essere appropriati per altri. Per esempio, il termine 'italic' è comunemente usato per classificare il testo inclinato, ma il testo inclinato può anche essere classificato come Oblique, Slanted, Incline, Cursive, oppure Kursiv. Similmente, i nomi dei font contengono di solito termini che descrivono il "peso" di un font. Il ruolo principale di questi nomi è quello di distinguere tipi [face, termine tipografico] di diversa gradazione scura [darkness. letteralmente "tonalità scura"] all'interno di una singola famiglia di font. Non vi è un un significato universalmente accettato per queste denominazioni di peso e il loro impiego varia ampiamente. Per esempio un font che voi pensate sia grassetto [bold anche "neretto"] potrebbe essere descritto come Regular, Roman, Book, Medium, Semi- o Demi-Bold, Bold, o Black, a seconda di quanto sia scuro il tipo "normale" del font all'interno del disegno.

Questa mancanza di una nomenclatura sistematica rende impossibile, nei casi generali, creare un nome di tipo di un font che sia modificato e che si distingua in modo peculiare, ad esempio come più scuro.

Per questi motivi, i CSS usano un modello differente. I font vengono richiamati non attraverso un singolo nome di font, ma impostando una serie di proprietà dei font. Questi valori di proprietà costituiscono la base del meccanismo di selezione dei font usato dal programma utente. Le proprietà dei font possono essere modificate singolarmente, per esempio aumentando il peso del carattere, e il nuovo insieme di valori della proprietà del font verrà quindi usato per operare una nuova selezione dal database dei font. Il risultato è un aumento di regolarità per i fogli di stile degli autori e degli sviluppatori, e un aumento di robustezza.

15.2.1 Proprietà per specificare i font

I CSS2 specificano i font secondo queste caratteristiche:

Famiglia dei font [font family]
La famiglia dei font specifica quale famiglia di font debba essere usata per rendere il testo. Una famiglia di font è un gruppo di font concepiti per essere usati in combinazione e che mostrano similarità nel disegno. Un membro della famiglia può essere corsivo [italic], un altro grassetto, un altro condensato o che usa caratteri in maiuscoletto [small caps]. I nomi delle famiglie dei font comprendono "Helvetica", "New Century Schoolbook", e "Kyokasho ICA L". Tali nomi non sono ristretti ai caratteri latini. Le famiglie di font possono essere raggruppate in diverse categorie: quelle con o senza grazie [serif, o "terminazione"], quelle i cui caratteri sono o non sono spaziati secondo proporzione, quelli che imitano la scrittura a mano, quelli che sono font di fantasia, ecc.
Stile dei font [font style]
Lo stile dei font specifica se il testo debba essere reso usando un tipo normale [normal], italico [italic o "corsivo"], o obliquo [oblique]. L'italico è un tipo, compagno del normale, maggiormente corsivo, ma non così corsivo da renderlo un corsivo inglese [script]. L'obliqua è una forma inclinata del tipo normale, ed è usata più comunemente come compagna del sans-serif [sans-serif, senza grazie o terminazioni]. Questa definizione evita di dover definire tipi normali molto inclinati come obliqui, o tipi normali greci come italici.
Variante dei font [font variant]
La variante dei font indica se il testo deve essere reso usando i glifi normali per i caratteri minuscoli oppure i glifi in maiuscoletto [small-caps]. Un font particolare può contenere solo glifi normali, solo glifi in maiuscoletto o entrambi i tipi; questa proprietà è usata per richiedere un font appropriato e, se il font contiene entrambe le varianti, i glifi appropriati.
Peso dei font [font weight]
Il peso dei font si riferisce alla maggiore o minore nettezza dei glifi usati per rendere il testo, relativamente ad altri font nella stessa famiglia.
Tensione dei font [font stretch]
La tensione dei font indica la quantità desiderata di condensazione o di espansione nei glifi usati per rendere il testo, relativamente ad altri font nella stessa famiglia.
Dimensione dei font [font size]
La dimensione dei font si riferisce alla dimensione del font da linea di riferimento [baseline] a linea di riferimento, se impostato senza interlineatura [solid, termine tipografico] (nella terminologia CSS, questo avviene quando le proprietà 'font-size' e 'line-height' hanno lo stesso valore).

Per tutte le proprietà eccetto 'font-size', i valori di lunghezza 'em' e 'ex' si riferiscono alla dimensione del font dell'elemento corrente. Per 'font-size', queste unità di lunghezza si riferiscono alla dimensione del font dell'elemento genitore. Si prega di consultare la sezione sulle unità di lunghezza per maggiori informazioni.

Le proprietà CSS dei font sono usate per descrivere l'aspetto desiderato del testo nel documento. I descrittori dei font, di contro, sono usati per descrivere le caratteristiche dei font, così da poter scegliere un font adatto per creare la presentazione desiderata. Per informazioni sulla classificazione dei font, si prega di consultare la sezione sui descrittori dei font.

15.2.2 La famiglia dei font: la proprietà 'font-family'

'font-family'
Valore:  [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
Iniziale:  dipende dal programma utente
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica un elenco prioritario di nomi di famiglia dei font e/o nomi di famiglia generica. Per affrontare il problema che un singolo font può non contenere i glifi per visualizzare tutti i caratteri in un documento, o che non tutti i font sono disponibili su tutti i sistemi, questa proprietà permette agli autori di specificare un elenco di font, tutti del medesimo stile e dimensione, che vengono provati in sequenza per vedere se contengono un glifo per un determinato carattere. Questo elenco è chiamato insieme di font.

Esempi(o):

Per esempio, un testo che contiene parole inglesi mischiate con simboli matematici può aver bisogno di un insieme di font di due font, uno contenente lettere latine e cifre, l'altro contenente simboli matematici. Ecco un esempio di insieme di font adatto per un testo che si suppone che contenga caratteri latini, caratteri giapponesi, e simboli matematici:

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

I glifi disponibili nel font "Baskerville" (un font che copre solo i caratteri latini) saranno presi da questo font, i glifi giapponesi saranno presi da "Heisi Mincho W3" e i glifi dei simboli matematici verranno da "Symbol". Tutti gli altri verranno dalla famiglia generica di font 'serif'.

La famiglia generica di font verrà usata se uno o più degli altri font in un insieme di font non è disponibile. Sebbene molti font forniscano il glifo per il "carattere mancante", di solito un riquadro vuoto, la famiglia generica, come suggerisce il suo nome, non dovrebbe essere considerata come una corrispondenza tranne per l'ultimo font in un insieme di font.

Ci sono due tipi di nomi di famiglia dei font:

<family-name>
Il nome di una famiglia di font da scegliere. Nel precedente esempio, "Baskerville", "Heisi Mincho W3", e "Symbol" sono famiglie di font. I nomi di famiglia dei font che contengono uno spazio bianco dovrebbero essere racchiusi fra virgolette. Se si omettono le virgolette, tutti i caratteri di spazio bianco prima e dopo il nome del font sono ignorati ed ogni sequenza di caratteri di spazio bianco all'interno del nome del font viene convertita in un singolo spazio.
<generic-family>
Vengono definite le seguenti famiglie generiche: 'serif', 'sans-serif', 'cursive', 'fantasy', e 'monospace'. Si prega di consultare la sezione sulle famiglie generiche di font per le descrizioni di queste famiglie. I nomi delle famiglie generiche di font sono parole chiave, e pertanto non devono essere racchiusi fra virgolette.

Si incoraggiano gli autori ad offrire una famiglia generica di font come ultima alternativa, per una migliorata robustezza.

Per esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
    </STYLE>
  </HEAD>
  <BODY>
   <H1 style="font-family: 'My own font', fantasy">Test</H1>
    <P>What's up, Doc?
  </BODY>
</HTML>

Esempi(o):

Il selettore del sintassi CSS2 più ricco può essere usato per creare una tipografia sensibile alla lingua. Per esempio, alcuni caratteri cinesi e giapponesi sono unificati per avere il medesimo punto di codifica Unicode, sebbene i glifi astratti non siano gli stessi nelle due lingue.

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

Questo seleziona ogni elemento che abbia il linguaggio dato - giapponese o cinese tradizionale - e richiede il font appropriato.

15.2.3 Attribuire uno stile ai font: le proprietà 'font-style', 'font-variant', 'font-weight' e 'font-stretch'

'font-style'
Valore:  normal | italic | oblique | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

La proprietà 'font-style' specifica tipi normali (a volte indicati come "romani" [roman] o "dritti" [upright]), italici, e obliqui all'interno di una famiglia di font. I valori hanno i seguenti significati:

normal
Specifica un font classificato come 'normal' nel database di font del programma utente.
oblique
Specifica un font classificato come 'oblique' nel database di font del programma utente. I font con Oblique, Slanted, o Incline nei loro nomi saranno di solito classificati come 'oblique' nel database di font. Un font classificato come 'oblique' nel database di font del programma utente può in effetti essere stato generato inclinando elettronicamente un font normale.
italic
Specifica un font classificato come 'italic' nel database di font del programma utente o, se non è disponibile, uno classificato come 'oblique'. I font come Italic, Cursive, o Kursiv nei loro nomi saranno di solito classificati come 'italic'.

Esempi(o):

In questo esempio, il testo normali negli elementi H1, H2, o H3 sarà visualizzato con un font italico. Tuttavia, il testo enfatizzato (EM) all'interno di un elemento H1 apparirà con un tipo normale.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
'font-variant'
Valore:  normal | small-caps | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

In un font maiuscoletto [small-caps], i glifi delle lettere minuscole appaiono simili a quelli delle maiuscole, ma con dimensione ridotta e con proporzioni molto differenti. La proprietà 'font-variant' specifica un tale font per le scritture bicamerali (che hanno due casi [cases, ossia che hanno lettere maiuscole e minuscole], come nella scrittura latina). Questa proprietà non ha alcun effetto visibile sulle scritture che sono unicamerali (che hanno un solo caso, come per la maggior parte dei sistemi di scrittura del mondo). I valori hanno i seguenti significati:

normal
Specifica un font che non è classificato come maiuscoletto.
small-caps
Specifica un font che è classificato come maiuscoletto. Se un font maiuscoletto genuino non è disponibile, i programmi utente dovrebbero simulare un font maiuscoletto, per esempio prendendo un font normale e rimpiazzando le lettere minuscole con caratteri maiuscoli scalati. Come ultima risorsa, i glifi non scalati delle lettere maiuscole in un font normale possono rimpiazzare i glifi in un font maiuscoletto, così che il testo appaia con tutte le lettere maiuscole.

Esempi(o):

Il seguente esempio consiste in un elemento H3 in maiuscoletto, con parole enfatizzate (EM) in maiuscoletto obliquo:

H3 { font-variant: small-caps }
EM { font-style: oblique }

Nella misura in cui questa proprietà fa in modo che il testo sia trasformato in maiuscolo, si applicano le medesime osservazioni per 'text-transform'.

'font-weight'
Value:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

La proprietà 'font-weight' specifica il peso del font. I valori hanno i seguenti significati:

da 100 a 900
Questi valori formano una sequenza ordinata, in cui ogni numero indica un peso che è scuro almeno come il suo predecessore.
normal
Lo stesso che '400'.
bold
Lo stesso che '700'.
bolder
Specifica il peso successivo che è assegnato ad un font che è più scuro di quello ereditato. Se non vi è un tale peso, risulta semplicemente nel valore numerico più scuro successivo (e il font resta immutato), a meno che il valore ereditato non sia '900', nel qual caso anche il peso risultante è '900'.
lighter
Specifica il peso successivo che è assegnato ad un font che è più chiaro di quello ereditato. Se non vi è un tale peso, risulta semplicemente nel valore numerico più chiaro successivo (e il font resta immutato), a meno che il valore ereditato non sia '100', nel qual caso anche il peso risultante è '100'.

Esempi(o):

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */

Gli elementi figli ereditano il valore calcolato del peso.

'font-stretch'
Valore:  normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

La proprietà 'font-stretch' seleziona un tipo normale, condensato o esteso da una famiglia di font. I valori assoluti delle parole chiave hanno il seguente ordine, dal più stretto al più largo:

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

La parola chiave relativa 'wider' imposta il valore sul valore esteso successivo al di sopra del valore ereditato (non aumentandolo oltre 'ultra-expanded'); la parola chiave relativa 'narrower' imposta il valore sul valore condensato successivo al di sotto del valore ereditato (non diminuendolo oltre 'ultra-condensed').

15.2.4 Dimensione dei font: le proprietà 'font-size' e 'font-size-adjust'

'font-size'
Valore:  <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Iniziale:  medium
Si applica a:  tutti gli elementi
Ereditata:  si, il valore calcolato è ereditato
Percentuali:  in riferimento alla dimensione del font dell'elemento genitore
Media:  visuale

Questa proprietà descrive la dimensione del font quando è impostato senza interlineatura [solid, anche "compatto"]. I valori hanno i seguenti significati:

<absolute-size>
Una parola chiave <absolute-size> si riferisce ad una voce [entry, anche "immissione, registrazione"] nella tabella delle dimensioni dei font calcolata e mantenuta dal programma utente. I possibili valori sono:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Su uno schermo di computer si suggerisce un fattore di misurazione in scala di 1.2 fra indici adiacenti; se il font 'medium' è 12pt, quello 'large' potrebbe essere 14.4pt. Media differenti possono aver bisogno di differenti fattori di misurazione in scala. Ancora: il programma utente dovrebbe prendere in considerazione la qualità è la disponibilità dei font quando calcola la tabella. La tabella può essere differente da una famiglia di font all'altra.

Nota. Nei CSS1, il fattore suggerito di misurazione in scala fra indici adiacenti era 1.5, che l'esperienza degli utenti dimostrò essere troppo ampio.

<relative-size>
Una parola chiave <relative-size> è interpretata relativamente alla tabella delle dimensioni dei font e alla dimensione del font dell'elemento genitore. I valori possibili sono:

[ larger | smaller ]

Per esempio, se l'elemento genitore ha la dimensione del font su 'medium', un valore di 'larger' renderà la dimensione del font dell'elemento corrente 'large'. Se la dimensione dell'elemento genitore non è vicina ad una voce della tabella, il programma utente è libero di interpolare [interpolate, termine matematico] le voci della tabella o di arrotondare alla voce più vicina. Il programma utente può dover estrapolare i valori della tabella se il valore numerico va oltre le parole chiave.

<length>
Un valore di lunghezza specifica una dimensione di font assoluta (ossia indipendente dalla tabella del programma utente). Lunghezze negative non sono valide.
<percentage>
Un valore percentuale specifica una dimensione del font assoluta in relazione alla dimensione del font dell'elemento genitore. Usare valori percentuali, o valori in 'em', porta a fogli di stile più robusti e maggiormente conformi all'ordine di cascata.

Il valore effettivo di questa proprietà può differire dal valore calcolato a causa di un valore numerico per 'font-size-adjust' e della mancata disponibilità di determinate dimensioni dei font.

Gli elementi figli ereditano il valore calcolato di 'font-size' (altrimenti l'effetto di 'font-size-adjust' aumenterebbe).

Esempi(o):

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
'font-size-adjust'
Valore:  <number> | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Nelle scritture bicamerali [bicameral, ossia con caratteri maiuscoli e minuscoli], l'apparente dimensione soggettiva e la leggibilità di un font sono meno dipendenti dal loro valore 'font-size' che dal valore della loro 'x-height', o, più proficuamente, dal rapporto di questi due valori, chiamato valore di aspetto (dimensione del font divisa per altezza-x [x-height]). Più è alto il valore di aspetto, più è probabile che un font a piccole dimensioni sarà leggibile. Di contro, faccie con un valore di aspetto più basso diventeranno illegibili più rapidamente sotto una data dimensione di soglia rispetto a faccie con un valore di aspetto più alto. La semplice sostituzione di font basata solo sulla dimensione può portare a caratteri illegibili.

Per esempio, il popolare font Verdana ha un valore di aspetto di 0.58; quando la dimensione del font Verdana è di 100 unità, la sua altezza-x è di 58 unità. Come paragone, il Times New Roman ha un valore di aspetto di 0.46. Perciò il Verdana tenderà a rimanere leggibile a piccole dimensioni di quanto non faccia il Times New Roman. Di contro, il Verdana apparirà spesso 'troppo grande' se sostituito al Times New Roman ad una dimensione scelta.

Questa proprietà permette agli autori di specificare un valore di aspetto per un elemento che manterrà l'altezza-x del font della prima scelta nel font sostituto. I valori hanno i seguenti significati:

none
Non mantiene l'altezza-x del font.
<number>
Specifica il valore di aspetto. Il numero si riferisce al valore di aspetto del font della prima scelta. Il fattore di misurazione in scala per i font disponibili è calcolato secondo la seguente formula:
  y(a/a') = c

dove:

y = 'font-size' del font della prima scelta
a' = valore di aspetto del font disponibile
c = 'font-size' da applicare al font disponibile

Esempi(o):

Per esempio, se un Verdana da 14px (con un valore di aspetto di 0.58) non fosse disponibile e il font disponibile avesse un valore di aspetto di 0.46, la dimensione del sostituto sarebbe 14 * (0.58/0.46) = 17.65px.

L'aggiustamento della dimensione del font ha luogo quando si calcola il valore effettivo di 'font-size'. Poichè l'eredità si basa sul valore effettivo, gli elementi figli erediteranno valori non aggiustati.

La prima immagine di sotto mostra diversi caratteri tipografici rasterizzati su una comune dimensione del font (11pt a 72 ppi), insieme con i loro valori di aspetto. Si noti che i tipi con valori di aspetto più alti appaiono più grandi di quelli con valori di aspetto più bassi. I tipi con valori di aspetto molto bassi sono illegibili nella dimensione mostrata.

Comparazione di font a 12 punti

L'immagine successiva mostra i risultati di 'font-size-adjust' dove il Verdana è stato preso come "prima scelta", unitamente al fattore di misurazione in scala applicato. Una volta aggiustate, le dimensioni apparenti sono quasi lineari fra i vari tipi, sebbene le dimensioni effettive (em) varino di oltre il 100%. Si noti altresì che 'font-size-adjust' tende a stabilizzare le metriche orizzontali delle righe.

Comparazione di font aggiustati

15.2.5 Proprietà stenografica per i font: la proprietà 'font'

'font'
Valore:  [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  consentite per 'font-size' e 'line-height'
Media:  visuale

La proprietà 'font' è, tranne per quello descritto più avanti, una proprietà stenografica [shorthand, o "abbreviata"] per impostare 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', e 'font-family', nella medesima posizione nel foglio di stile. La sintassi di questa proprietà è basata su una notazione stenografica della tipografia tradizionale per impostare proprietà multiple relative ai font.

Tutte le proprietà relative ai font sono dapprima riportate ai loro valori iniziali, inclusi quelli elencati nel precedente paragrafo, più 'font-stretch' e 'font-size-adjust'. Poi queste proprietà, a cui sono stati dati valori espliciti nell'annotazione stenografica 'font', sono impostate su questi valori. Per una definizione dei valori permessi ed iniziali, si vedano le proprietà precedentemente definite. Per ragioni di compatibilità a ritroso [backwards, o "all'indietro"], non è possibile impostare 'font-stretch' e 'font-size-adjust' su altri valori diversi da quelli iniziali usando la proprietà stenografica 'font'; si impostino invece le proprietà individuali.

Esempi(o):

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Nella seconda regola, il valore percentuale della dimensione del font ('80%') si riferisce alla dimensione del font dell'elemento genitore. Nella terza regola, l'altezza di riga in percentuale ('110%') si riferisce alla dimensione del font dell'elemento stesso.

Le prime tre regole non specificano le proprietà 'font-variant' e 'font-weight' esplicitamente, sicchè queste proprietà ricevono i loro valori iniziali ('normal'). Si noti che il nome della famiglia di font "new century schoolbook", che contiene spazi, è racchiuso tra virgolette. La quarta regola imposta la proprietà 'font-weight' su 'bold', la proprietà 'font-style' su 'italic', ed imposta implicitamente 'font-variant' su 'normal'.

La quinta regola imposta la proprietà 'font-variant' ('small-caps'), la proprietà 'font-size' (120% della dimensione del font del genitore), la 'line-height' (120% della dimensione del font) e la proprietà 'font-family' ('fantasy'). Ne consegue che la parola chiave 'normal' si applica alle due rimanenti proprietà: 'font-style' e 'font-weight'.

La sesta regola imposta la proprietà 'font-style', 'font-size', e 'font-family', con le altre proprietà dei font impostate sui loro valori iniziali. Infine viene impostata 'font-stretch' su 'condensed' poichè questa proprietà non può essere impostata su quel valore usando la proprietà stenografica 'font'.

I seguenti valori si riferiscono a font di sistema:

caption
Il font usato per controlli con didascalia (per esempio bottoni, controlli a discesa, ecc.).
icon
Il font usato per etichettare le icone.
menu
Il font usato nei menu (per esempio menu a discesa e menu ad elenco).
message-box
Il font usato nei riquadri di dialogo.
small-caption
Il font usato per etichettare piccoli controlli.
status-bar
Il font usato nelle barre di stato della finestra.

I font di sistema possono essere impostati come un tutto unico, ossia la famiglia di font, la dimensione, il peso, lo stile ecc. sono impostati tutti allo stesso tempo. Questi valori possono poi essere modificati singolarmente se lo si desidera. Se non esiste alcun font con le caratteristiche indicate su una data piattaforma, il programma utente dovrebbe o sostituire in modo intelligente (per esempio una versione più piccola del font 'caption' potrebbe essere usata per il font 'smallcaption'), oppure usare il suo font predefinito. Come per i font regolari, se, per un font di sistema, ciascuna delle singole proprietà non fa parte delle preferenze disponibili sul sistema operativo dell'utente, allora queste proprietà dovrebbero essere impostate sui loro valori iniziali.

Ecco perchè questa proprietà è "quasi" una proprietà stenografica: i font di sistema possono essere specificati solo con questa proprietà, non con la stessa 'font-family', così 'font' consente agli autori di poter fare di più che non con la somma delle sue sotto-proprietà. Tuttavia, le proprietà individuali come 'font-weight' sono ancora valori dati presi dai font di sistema, che possono essere variati indipendentemente.

Esempi(o):

BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }

Se il font usato per i menu a discesa su un particolare sistema fosse, per esempio, Charcoal da 9pt, con un peso di 600, allora gli elementi P discendenti di BUTTON verrebbero visualizzati come se in effetti questa regola fosse:

BUTTON P { font: 600 9pt Charcoal }

Poichè la proprietà stenografica 'font' riporta al suo valore iniziale ogni proprietà cui non sia stato dato un valore esplicito, la regola di cui sopra ha lo stesso effetto di questa dichiarazione:

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
} 

15.2.6 Famiglie generiche di font

Le famiglie generiche di font sono un meccanismo di ripiego, nel senso che preservano l'intenzione del foglio di stile dell'autore nel caso peggiore in cui nessuno dei font specificati può essere selezionato. Per un controllo tipografico ottimale, font particolari denominati dovrebbero essere usati nei fogli di stile.

Si stabilisce che le cinque famiglie generiche di font esistono in tutte le implementazioni CSS (non c'è bisogno di correlarli necessariamente a cinque distinti font effettivi). I programmi utente dovrebbero fornire ragionevoli scelte predefinite per le famiglie generiche di font, che esprimano il più possibile le caratteristiche di ogni famiglia entro i limiti concessi dalla loro tecnologia.

I programmi utente sono incoraggiati a consentire agli utenti di effettuare scelte alternative per i font generici.

serif

I glifi dei font serif [serif, con grazie], come il termine è usato nei CSS, hanno tratti terminali, estremità allargate o affusolate, oppure effettive terminazioni con grazie (incluse grazie a lastroni). I font serif sono di solito spaziati in modo proporzionato. Mostrano spesso una grande variazione fra tratti sottili e spessi rispetto ai font della famiglia generica 'sans-serif.' I CSS usano il termine 'serif' per applicarlo a font di ogni tipo di scrittura, sebbene altri nomi possono essere più familiari per particolari tipi di scrittura come Mincho (giapponese), Sung o Song (cinese), Totum o Kodig (coreano). Ogni font così descritto può essere usato per rappresentare la famiglia generica 'serif'.

Esempi di font che soddisfano questa descrizione includono:

Font latini Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Font greci Bitstream Cyberbit
Font cirillici Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Font ebraici New Peninim, Raanana, Bitstream Cyberbit
Font giapponesi Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Font arabi Bitstream Cyberbit
Font cherokee Lo Cicero Cherokee

sans-serif

I glifi nei font sans-serif [sans-serif, senza grazie], come il termine è usato nei CSS, hanno tratti terminali diritti -- privi di qualsiasi tratto allargato o obliquo, o di altro ornamento. I font sans-serif sono di solito spaziati in modo proporzionato. Hanno spesso una variazione ridotta fra tratti spessi e sottili, paragonati ai font della famiglia 'serif'. I CSS usano il termine 'sans-serif' per applicarlo a font di ogni tipo di scrittura, sebbene altri nomi possano essere più familiari per particolari tipi di scrittura, come Gothic (giapponese), Kai (cinese), o Pathang (coreano). Ogni font così descritto può essere usato per rappresentare la famiglia generica 'sans-serif'.

Esempi di font che soddisfano questa descrizione includono:

Font latini MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Font greci Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Font cirillici Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Font ebraici Arial Hebrew, MS Tahoma
Font giapponesi Shin Go, Heisei Kaku Gothic W5
Font arabi MS Tahoma

cursive

I glifi nei font cursive [cursive, corsivo], come il termine è usato nei CSS, generalmente hanno sia tratti di congiunzione che altre caratteristiche corsive oltre a quelle dei caratteri italici. I glifi sono in parte o completamente uniti, e il risultato appare più simile al tratto di penna o alla scrittura stesa a mano che non alla tipografia stampata. I font per alcuni tipi di scrittura, come l'arabo, sono quasi sempre corsivi. I CSS usano il termine 'cursive' per applicarlo a font di ogni tipo di scrittura, sebbene altri nomi come Chancery, Brush, Swing e Script siano anche usati nei nomi di font.

Esempi di font che soddisfano questa descrizione includono:

Font latini Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Font cirillici ER Architekt
Font ebraici Corsiva
Font arabi DecoType Naskh, Monotype Urdu 507

fantasy

I font fantasy [fantasy, fantasia], come vengono usati nei CSS, sono soprattutto decorativi sebbene contengano ancora rappresentazioni dei caratteri (in opposizione ai Pi o Picture [picture, dipinto] font, che non rappresentano caratteri). Gli esempi includono:

Font latini Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

Il solo criterio per un font monospace [monospace, monospazio] è che tutti i glifi hanno la stessa larghezza fissa. (Questo può rendere alcuni tipi di scrittura, come l'arabo, ancora più peculiari.) L'effetto è simile a quello che si ottiene con una macchina da scrivere manuale, ed è spesso usato per gli esempi di codice di computer.

Esempi di font che soddisfano questa descrizione includono:
Font latini Courier, MS Courier New, Prestige, Everson Mono
Font greci MS Courier New, Everson Mono
Font cirillici ER Kurier, Everson Mono
Font giapponesi Osaka Monospaced
Font cherokee Everson Mono

15.3 Selezionare un font

La seconda fase del meccanismo dei font dei CSS2 riguarda la sezione da parte del programma utente di un font basato sulle proprietà dei font specificate dall'autore, sui font disponibili, ecc. I dettagli dell'algoritmo di corrispondenza dei font sono forniti più avanti.

Ci sono quattro azioni possibili per la selezione di un font: corrispondenza del nome, corrispondenza intelligente, sintesi e download [download, scaricamento].

corrispondenza del nome dei font
In questo caso il programma utente usa un font esistente ed accessibile che ha lo stesso nome di famiglia del font richiesto. (Si noti che l'aspetto e la metrica potrebbero non necessariamente corrispondere se il font usato dall'autore del documento e il font sul sistema dell'utente provengono da differenti origini tipografiche [foundry o "fonderia"]). L'informazione di corrispondenza è ristretta alle proprietà dei font dei CSS, incluso il nome della famiglia. Questo è l'unico metodo usato dai CSS1.
corrispondenza intelligente dei font
In questo caso il programma utente usa un font esistente ed accessibile, che è la corrispondenza più vicina nell'aspetto al font richiesto. (Si noti che la metrica potrebbe non corrispondere esattamente). L'informazione di corrispondenza include informazioni sul tipo di font (testo o simbolo), sulla natura delle grazie, sul peso, sull'altezza del capolettera, sull'altezza-x, sull'ascesa [ascent, distanza dalla parte superiore del glifo alla linea di riferimento], sulla discesa [descent, distanza dalla parte inferiore del glifo alla linea di riferimento], sull'inclinazione, ecc.
sintesi dei font
In questo caso il programma utente crea un font che non è solo una stretta corrispondenza nell'aspetto, ma che corrisponde anche alla metrica del font richiesto. Le informazioni di sintesi comprendono le informazioni di corrispondenza e di solito richiedono valori più accurati per i parametri rispetto a quelli usati per gli schemi di corrispondenza. In particolare, la sintesi richiede accurati parametri metrici di ampiezza e di carattere, nonchè informazioni di posizionamento per la sostituzione del glifo, se si devono preservare tutte le caratteristiche di impaginazione del font specificato.
download dei font
Infine, il programma utente può recuperare un font dal Web. Ciò è simile al processo dell'inclusione di immagini, suoni, o applet presi dal Web per visualizzarli nel documento corrente, e così possono verificarsi dei tempi di attesa prima che la pagina possa essere visualizzata.

La resa progressiva è una combinazione del download e di uno degli altri metodi; fornisce un font sostituto temporaneo (usando la corrispondenza del nome, la corrispondenza intelligente o la sintesi) per consentire di leggere il contenuto mentre il font richiesto viene scaricato. Una volta che il font vero e proprio è stato scaricato con successo, sostituisce il font temporaneo, si spera senza bisogno di risistemare il flusso del documento.

Nota. La resa progressiva richiede informazioni metriche sul font per evitare la re-impaginazione del contenuto quando il font vero e proprio è stato caricato e reso. Queste informazioni metriche sono sufficientemente prolisse, e dovrebbero essere specificate al massimo una volta per font nel documento.

15.3.1 Descrizione dei font e @font-face

La descrizione dei font fornisce il collegamento fra la specifica di un font dell'autore e i dati dei font, che sono i dati necessari a formattare il testo e a rendere i glifi astratti a cui i caratteri sono correlati - i contorni effettivi scalari o bitmap. I font vengono presi come riferimento dalle proprietà del foglio di stile.

La descrizione dei font è aggiunta al database dei font e quindi usata per selezionare i dati dei font rilevanti. La descrizione dei font contiene descrittori quali la localizzazione dei dati dei font sul Web, e le caratterizzazioni di questi dati dei font. I descrittori dei font sono anche richiesti per far corrispondere le proprietà dei font del foglio di stile a particolari dati dei font. Il livello di dettaglio di una descrizione dei font può variare dal nome del font fino all'elenco delle larghezze dei glifi.

I descrittori dei font possono essere classificati in tre tipi:

  1. quelli che forniscono il collegamento fra l'impiego CSS dei font e la descrizione dei font (hanno gli stessi nomi delle corrispondenti proprietà CSS dei font),
  2. l'URI per la localizzazione dei dati dei font,
  3. quelli che caratterizzano ulteriormente il font, fornendo un collegamento tra la descrizione dei font e i dati dei font.

Tutte le descrizioni dei font sono specificate tramite una regola-a [at-rule] @font-face. La forma generale è:

@font-face { <font-description> }

dove <font-description> ha la forma:

descriptor: value;
descriptor: value;
[...]
descriptor: value;

Ogni regola @font-face specifica un valore per ogni descrittore dei font, implicitamente o esplicitamente. Quei valori non assegnati in modo esplicito nella regola assumono il valore iniziale elencato con ogni descrittore in queste specifiche. Questi descrittori si applicano solo all'interno del contesto delle regola @font-face in cui sono definiti, e no si applicano agli elementi del linguaggio del documento. Così, non vi è nozione sugli elementi ai quali si applicano i descrittori, o se i valori vengono ereditati dagli elementi figli.

I descrittori dei font disponibili sono illustrati nelle sezioni successive di questo capitolo delle specifiche.

Per esempio, qui il font 'Robson Celtic' è definito e posto come riferimento in un foglio di stile contenuto in un documento HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> This heading is displayed using Robson Celtic</H1>
  </BODY>
</HTML>

Il foglio di stile (nell'elemento STYLE) contiene una regola CSS che imposta tutti gli elementi H1 sulla famiglia di font 'Robson Celtic'.

L'implementazione CSS1 cercherà sul sistema dell'utente un font il cui nome di famiglia e le altre proprietà corrispondono a 'Robson Celtic' e, se non riuscirà a trovarlo, userà il font serif specifico di ripiego del programma utente (che esiste per definizione).

Un programma utente che implementa i CSS2 esaminerà prima le regole @font-face in cerca di una descrizione dei font che definisca 'Robson Celtic'. Questo esempio contiene una regola che ha una corrispondenza. Sebbene questa regola non contenga molti dati dei font, ha un URI dove il font può essere preso per rendere questo documento. I font scaricati non dovrebbero essere resi disponibili per altre applicazioni. Se non viene trovata alcuna @font-face che corrisponda, il programma utente proverà a trovare la stessa corrispondenza di un programma utente che implementa i CSS1.

Si noti che se il font 'Robson Celtic' fosse stato installato sul sistema dell'utente, questo avrebbe fatto in modo che il programma utente aggiungesse una voce [entry] nel database dei font per la copia installata, come descritto nella sezione sull'algoritmo di corrispondenza dei font. La copia installata sarebbe stata selezionata prima del font scaricabile nell'esempio di cui sopra.

Le implementazioni CSS1, che non comprendono la regola @font-face, incontreranno la parentesi graffa aperta e ignoreranno il suo contenuto fino alla corrispondente parentesi graffa di chiusura. Questa regola-a [at-rule] è conforme al requisito dei CSS sull'analisi compatibile nel futuro. I parser possono ignorare queste regole senza errore.

Tenere separati i descrittori dei font dai dati dei font ha un beneficio che va al di là dell'essere in grado di selezionare o sostituire i font. La protezione sui dati e le restrizioni sulla replica per i descrittori dei font possono essere molto più deboli dei dati dei font nel loro insieme. Così, è possibile installare la definizione del font localmente, o almeno tenerla in una cache locale se essa ricorre in un foglio di stile a cui si fa comune riferimento; questo sistema necessiterebbe dell'accesso alla completa definizione dei font sul Web non più di una volta per ogni font denominato.

Se un descrittore dei font viene duplicato, il descrittore che ricorre per ultimo vince ed il resto deve essere ignorato.

Inoltre tutti i descrittori non riconosciuti o non utili per il programma utente devono essere ignorati. Le future versioni dei CSS possono consentire descrittori aggiuntivi allo scopo di una migliore sostituzione, corrispondenza o sintesi dei font.

15.3.2 Descrittori per selezionare un font: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' e 'font-size'

I seguenti descrittori hanno gli stessi nomi delle corrispondenti proprietà CSS dei font, e assumono un singolo valore o un elenco di valori separati da virgola.

I valori all'interno dell'elenco sono, tranne dove indicato esplicitamente, gli stessi della corrispondente proprietà CSS. Se c'è un singolo valore, questo è il valore che deve essere selezionato. Se c'è un elenco, ogni voce dell'elenco costituisce una corrispondenza. Se il descrittore è omesso da @font-face, si usa il valore iniziale per il descrittore.

'font-family' (Descrittore)
Valore:  [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]*
Iniziale:  dipende dal programma utente
Media:  visuale

Questo è il descrittore per il nome di famiglia dei font di un font e assume gli stessi valori della proprietà 'font-family'.

'font-style' (Descrittore)
Valore:  all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
Iniziale:  all
Media:  visuale

Questo è il descrittore per lo stile di un font e assume gli stessi valori della proprietà 'font-style', tranne per il fatto che è permesso un elenco separato da virgola.

'font-variant' (Descrittore)
Valore:  [normal | small-caps] [,[normal | small-caps]]*
Iniziale:  normal
Media:  visuale

Questa è il descrittore che indica se il tipo di un font è in maiuscoletto [small-caps] o meno. Assume gli stessi valori della proprietà 'font-variant' tranne per il fatto che è permesso un elenco separato da virgola.

Nota. Tipi cirillici pryamoĭ possono essere definiti con 'font-variant' su maiuscoletto, che conferiranno loro una migliore consistenza con i tipi latini (e il tipo compagno kursiv è definito con 'font-style' su italico [italic] per la stessa ragione).

'font-weight' (Descrittore)
Valore:  all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
Iniziale:  all
Media:  visuale

Questo è il descrittore per il peso di un tipo relativamente ad altri della stessa famiglia di font. Assume gli stessi valori della proprietà 'font-weight' con tre eccezioni:

  1. le parole chiave relative (bolder, lighter) non sono permesse.
  2. un elenco di valori separati da virgola è permesso per quei font che contengono pesi multipli.
  3. una parola chiave aggiuntiva 'all' è permessa, ed indica che il font corrisponderà a tutti i pesi possibili, sia che contenga pesi multipli o che quel tipo abbia solo un singolo peso.
'font-stretch' (Descrittore)
Valore:  all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*
Iniziale:  normal
Media:  visuale

Questa è l'indicazione CSS della natura espansa o condensata del tipo, in relazione ad altri tipi nella medesima famiglia di font. Assume gli stessi valori della proprietà 'font-stretch' tranne per il fatto che:

'font-size' (Descrittore)
Valore:  all | <length> [, <length>]*
Iniziale:  all
Media:  visuale

Questo è il descrittore per le dimensioni fornite da questo font. Sono permesse solo unità di lunghezza assolute, in contrasto con la proprietà 'font-size', che permette dimensioni e lunghezze relative e assolute. Un elenco separato da virgola di lunghezze assolute è permesso.

Il valore iniziale di 'all' è adatto soprattutto per i font scalabili, così questo descrittore è inteso principalmente per l'uso in una regola @font-face per font bitmap,o per font scalabili concepiti per essere rasterizzati in un ristretto campo di dimensioni.

15.3.3 Descrittori per precisare i dati contenuti in un font: 'unicode-range'

Il seguente descrittore è facoltativo all'interno di una definizione di font, ma è usato per evitare di cercare o scaricare un font che non ha glifi sufficienti per rendere un particolare carattere.

'unicode-range' (Descrittore)
Valore:  <urange> [, <urange>]*
Iniziale:  U+0-7FFFFFFF
Media:  visuale

Questo è il descrittore per il campo di caratteri ISO 10646 coperto dal font.

I valori di <urange> sono espressi usando numeri esadecimali con prefisso "U+", corrispondenti alle posizioni del codice del carattere in ISO 10646 ([ISO10646]).

Per esempio, U+05D1 è il carattere ISO 10646 'Hebrew letter bet'. Per valori al di fuori del Basic Multilingual Plane (BMP), vengono aggiunte cifre iniziali aggiuntive corrispondenti al numero di livello, anche in esadecimale, come questo: U+A1234 che è il carattere sul Plane 10 alla posizione esadecimale di codice 1234. Al momento della stesura di questo documento, nessun carattere è stato assegnato al di fuori del BMP. Gli zero iniziali (per esempio, 0000004D) sono validi, ma non richiesti.

Il valore iniziale di questo descrittore copre non solo l'intero Basic Multilingual Plane (BMP), che verrebbe espresso come U+0-FFFF, ma anche l'intero repertorio ISO 10646. Così, il valore iniziale dice che il font può avere i glifi per i caratteri ovunque all'interno di ISO 10646. Specificare un valore per 'unicode-range' fornisce informazioni per rendere la ricerca efficiente, dichiarando un campo ristretto in cui il font può avere i glifi per i caratteri. Per il font c'è bisogno di cercare caratteri al di fuori di questo campo.

I valori possono essere scritti con ogni numero di cifre. Per i singoli numeri, si presuppone che il carattere '?' significhi 'any value' [any value, ogni valore] il che crea un campo di posizioni di carattere. Così, usando un singolo numero:

unicode-range: U+20A7
nessun metacarattere [wild card ossia "?"] - indica una singola posizione di carattere (il simbolo della peseta spagnola)
unicode-range: U+215?
un metacarattere, copre il campo da 2150 a 215F (le frazioni)
unicode-range: U+00??
due metacaratteri, copre il campo da 0000 a 00FF (Latin-1)
unicode-range: U+E??
due metacaratteri, copre da 0E00 a 0EFF (la scrittura Lao)

Una coppia di numeri in questo formato può essere combinata con il carattere lineetta per indicare campi più grandi. Per esempio:

unicode-range: U+AC00-D7FF
il campo è da AC00 a D7FF (l'area Hangul Syllables)

Si possono specificare campi multipli e discontinui, separati da una virgola. Come con gli altri elenchi separati da virgola nei CSS, ogni spazio bianco prima o dopo la virgola è ignorato. Per esempio:

unicode-range: U+370-3FF, U+1F??
Questo copre il campo da 0370 a 03FF (greco moderno) più quello da 1F00 a 1FFF (greco antico politonale).
unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F
Come caso peggiore in termini di prolissità, questo esempio indica con estrema precisione che questo font (estremamente vasto) contiene solo caratteri cinesi di ISO 10646, senza includere alcun carattere unicamente giapponese o coreano. Il campo va da 3000 a 303F (simboli e punteggiatura CJK) più il campo da 3100 a 312F (Bopomofo) più il campo da 3200 a 32FF (compresi mesi e lettere CJK) più il campo da 3300 a 33FF (zona di compatibilità CJK) più il campo da 4E00 a 9FFF (ideogrammi unificati CJK) più il campo da F900 a FAFF (ideogrammi di compatibilità CJK) più il campo da FE30 a FE4F (forme di compatibilità CJK).

Una rappresentazione più probabile per un font cinese sarebbe:

unicode-range: U+3000-33FF, U+4E00-9FFF

unicode-range: U+11E00-121FF
Questo font riguarda una registrazione proposta per pittogrammi aztechi, che copre il campo da 1E00 a 21FF sul livello 1.
unicode-range: U+1A00-1A1F
Questo font riguarda una registrazione proposta per l'Ogham irlandese, che copre il campo da 1A00 a 1A1F.

15.3.4 Descrittore per valori numerici: 'units-per-em'

Il seguente descrittore specifica il numero di "unità" per em; queste unità possono essere usate da diversi altri descrittori per esprimere varie lunghezze, sicchè 'units-per-em' è richiesto se altri descrittori ne dipendono.

'units-per-em' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per il numero di unità coordinate sul riquadro em, le dimensioni della griglia di disegno su cui sono rappresentati i glifi.

15.3.5 Descrittore per rimandi: 'src'

Questo descrittore è richiesto per far riferimento ai dati effettivi dei font, se sono scaricabili o installati localmente.

'src' (Descrittore)
Valore:  [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*
Iniziale:  non definito
Media:  visuale

Questo è un elenco prioritario, separato da virgola di rimandi esterni e/o di nomi di tipi di font installati. Il rimando esterno punta ai dati dei font sul Web. Ciò è richiesto se il WebFont deve essere scaricato. La risorsa del font può essere un sotto-insieme del font sorgente, per esempio può contenere solo i glifi necessari alla pagina corrente o ad un insieme di pagine.

Il rimando esterno consiste in un URI, seguito da un suggerimento facoltativo che riguarda il formato della risorsa del font rintracciabile a quell'URI, e questa informazione dovrebbe essere usata dagli utenti per evitare di seguire collegamenti in formati che non sono in grado di gestire. Come con ogni rimando ipertestuale, possono essere disponibili altri formati, ma in questo modo l'utente ha una migliore idea di ciò che è probabile che vi sia a quell'URI, in un modo certamente più robusto rispetto al semplice tentativo di analizzare le estensioni dei nomi di file presenti negli URI.

Il suggerimento sul formato contiene un elenco di stringhe di formato separate da virgola, che indicano formati di font ben conosciuti. Il programma utente riconoscerà il nome dei formati di font che può supportare, evitando così di scaricare font in formati che non riconosce.

Un elenco iniziale di stringhe di formato definito da queste specifiche e che rappresenta formati da usare probabilmente per le implementazioni su varie piattaforme è:

StringaFormato dei fontEsempi di estensioni comuni
"truedoc-pfr"TrueDoc™ Portable Font Resource .pfr
"embedded-opentype"Embedded OpenType .eot
"type-1"PostScript™ Type 1 .pfb, .pfa
"truetype"TrueType .ttf
"opentype"OpenType, incluso TrueType Open .ttf
"truetype-gx"TrueType con estensioni GX
"speedo"Speedo
"intellifont"Intellifont

Come con gli altri URI nei CSS, l'URI può essere parziale, nel qual caso viene risolto in relazione alla posizione del foglio di stile contenente @font-face.

La <font-face-name> installata localmente è il nome completo dei font di un font installato localmente. Il nome completo dei font è il nome del font come riportato dal sistema operativo ed è il nome che più probabilmente dovrà essere usato nei fogli di stile del lettore, nei fogli di stile predefiniti del browser o possibilmente nei fogli di stile dell'autore su di una intranet. Ornamenti quali bold, italic, e underline sono spesso usati per differenziare i tipi all'interno di una famiglia di font. Per ulteriori informazioni sui nomi completi dei font si prega di consultare le note più avanti.

La notazione per un <font-face-name> è il nome completo dei font, che deve essere racchiuso tra virgolette poichè può contenere ogni carattere, inclusi spazi e punteggiatura, e deve anche essere racchiuso in "local(" e ")".

Esempi(o):

src: url("http://foo/bar")
un URI completo e nessuna informazione sui formati(o) dei font disponibili in tale locazione
src: local("BT Century 751 No. 2 Semi Bold Italic")
rimandi ad una faccia particolare di un font installato localmente
src: url("../fonts/bar") format("truedoc-pfr")
un URI parziale che ha un font disponibile in formato TrueDoc
src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont")
un URI completo, in questo caso che punta ad uno script, che può generare due differenti formati - OpenType e Intellifont
src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1")
vengono date due alternative, la prima un font installato localmente e la seconda un font scaricabile disponibile in formato Type 1.

L'accesso a font installati localmente avviene tramite <font-face-name>. Il nome del tipo dei font non è realmente unico, e neppure è realmente indipendente dalla piattaforma o dal formato del font, ma al momento è il miglior modo di identificare i dati dei font installati localmente. L'uso dei nomi di tipo dei font può essere reso più accurato fornendo un'indicazione del glifo complementare richiesto. Ciò può essere fatto indicando il campo di posizioni di carattere ISO 10646 per il quale il font fornisce alcuni glifi (si veda 'unicode-range').

15.3.6 Descrittori per corrispondenze: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent', e 'descent'

Questi descrittori sono facoltativi per una definizione CSS2, ma possono essere usati se l'autore desidera una corrispondenza intelligente o un aggiustamento della dimensione dei font.

'panose-1' (Descrittore)
Valore:  [<integer>]{10}
Iniziale:  0 0 0 0 0 0 0 0 0 0
Media:  visuale

Questo è il descrittore per il numero di Panose-1 e consiste di dieci interi decimali, separati da uno spazio bianco. Un elenco separato da virgola non è permesso per questo descrittore, poichè il sistema Panose-1 può indicare che un campo di valori sono selezionati. Il valore iniziale è zero, che significa "any" [any, "ogni"], per ogni cifra PANOSE; tutti i font corrisponderanno al numero di Panose se viene usato questo valore. L'uso del descrittore Panose-1 è fortemente raccomandato per i font latini. Per ulteriori dettagli si veda l'Appendice C.

'stemv' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per l'ampiezza del gambo verticale del font. Se il valore non è definito, il descrittore non è usato per la corrispondenza. Se il descrittore è usato, deve essere usato anche il descrittore 'units-per-em'.

'stemh' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per l'ampiezza del gambo orizzontale del font. Se il valore non è definito, il descrittore non è usato per la corrispondenza. Se il descrittore è usato, deve essere usato anche il descrittore 'units-per-em'.

'slope' (Descrittore)
Valore:  <number>
Iniziale:  0
Media:  visuale

Questo è il descrittore dell'angolo di inclinazione verticale del font.

'cap-height' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per il numero dell'altezza dei glifi maiuscoli del font. Se il valore non è definito, il descrittore non è usato per la corrispondenza. Se si usa il descrittore, deve essere usato anche il descrittore 'units-per-em'.

'x-height' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per l'altezza dei glifi minuscoli del font. Se il valore non è definito, il descrittore non è usato per la corrispondenza. Se si usa il descrittore, deve essere usato anche il descrittore 'units-per-em'. Questo descrittore può essere molto utile se si usa la proprietà 'font-size-adjust', perchè il calcolo del valore z dei font candidati richiede sia la dimensione del font che l'altezza-x; si raccomanda perciò di includere questo descrittore.

'ascent' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per l'altezza massima non accentata del font. Se il valore non è definito, il descrittore non è usato per la corrispondenza. Se si usa il descrittore, deve essere usato anche il descrittore 'units-per-em'.

'descent' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per la profondità massima non accentata del font. Se il valore non è definito, il descrittore non è usato per la corrispondenza. Se si usa il descrittore, deve essere usato anche il descrittore 'units-per-em'

15.3.7 Descrittori per sintetizzare: 'widths', 'bbox' e 'definition-src'

Sintetizzare un font significa, come minimo, trovare la corrispondenza nell'ampiezza metrica del font specificato. Perciò, per la sintesi, questa informazione metrica deve essere disponibile. Similmente, la resa progressiva richiede l'ampiezza metrica per evitare la risistemazione del contenuto quando il font effettivo è stato caricato. Sebbene i seguenti descrittori siano facoltativi per una definizione CSS2, alcuni sono richiesti se l'autore desidera la sintesi (o la resa progressiva priva di risistemazione del contenuto). Il font effettivo dovrebbe divenire disponibile, e il sostituto dovrebbe essere rimpiazzato dal font effettivo. Ciascuno di questi descrittori presenti sarà usato per fornire un'approssimazione migliore o più rapida del font designato.

Di questi descrittori, i più importanti sono il descrittore 'widths' e 'bbox' che sono usati per evitare che il testo sia risistemato mentre il font effettivo dovrebbe divenire disponibile. In aggiunta, i descrittori nell'insieme dei descrittori usati per la corrispondenza possono essere usati per fornire una sintesi migliore dell'aspetto del font effettivo.

'widths' (Descrittore)
Valore:  [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+]
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per le ampiezze dei glifi. Questo valore è un elenco separato da virgola di valori <urange> ciascuno seguito da una o più ampiezze dei glifi. Se si usa il descrittore, deve essere usato anche il descrittore 'units-per-em'.

Se <urange> è omesso, si presuppone un campo di U+0-7FFFFFFF che copre tutti i caratteri e i loro glifi. Se non vengono fornite sufficienti ampiezze di glifi, l'ultima dell'elenco viene replicata per coprire tale campo. Se vengono fornite troppe ampiezze, quelle extra vengono ignorate.

Esempi(o):

Per esempio:

widths: U+4E00-4E1F 1736 1874 1692
widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792 
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

Nel primo esempio viene dato un campo di 32 caratteri, da 4E00 a 4E1F. Il glifo corrispondente al primo carattere (4E00) ha un'ampiezza di 1736, il secondo di 1874 e il terzo di 1692. Poichè non vengono fornite sufficienti ampiezze, l'ultima ampiezza viene replicata per coprire il resto del campo specificato. Il secondo esempio imposta un'ampiezza singola, 1490, per un intero campo di 256 glifi e quindi ampiezze esplicite per un campo di 16 glifi.

Questo descrittore non può descrivere glifi multipli che corrispondono ad un singolo carattere, o legature di caratteri multipli. Così, questo descrittore può solo essere usato per scritture che non hanno forme contestuali o legature vincolanti. Si rivela nondimeno utile in queste situazioni. Le scritture che richiedono una correlazione uno-a-molti e molti-a-molti fra caratteri e glifi non possono, al momento, usare questo descrittore per abilitare la sintesi dei font, sebbene possano ancora usare il download dei font o la corrispondenza intelligente.

'bbox' (Descrittore)
Valore:  <number>, <number>, <number>, <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per il riquadro di delimitazione massimo del font. Il valore è un elenco separato da virgola di quattro numeri esatti che specificano, nell'ordine, la coordinata x inferiore sinistra, la coordinata y inferiore sinistra, la coordinata x superiore destra e la coordinata y superiore destra del riquadro di delimitazione per il font completo.

'definition-src' (Descrittore)
Valore:  <uri>
Iniziale:  non definito
Media:  visuale

I descrittori dei font possono trovarsi all'interno della definizione dei font nel foglio di stile, oppure possono essere forniti all'interno di una separata risorsa di definizione dei font identificata da un URI. Quest'ultimo approccio può ridurre il traffico della rete quando fogli di stile multipli fanno riferimento agli stessi font.

15.3.8 Descrittori per l'allineamento: 'baseline', 'centerline', 'mathline', e 'topline'

Questi descrittori facoltativi sono usati per allineare le direzioni di differenti scritture le une con le altre.

'baseline' (Descrittore)
Valore:  <number>
Iniziale:  0
Media:  visuale

Questo è il descrittore per la linea di riferimento inferiore di un font. Se a questo descrittore viene dato un valore non-predefinito (non-zero), si deve usare anche il descrittore 'units-per-em'.

'centerline' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per la linea di riferimento centrale di un font. Se il valore non è definito, il programma utente può usare vari metodi euristici, come il punto medio dei valori di ascesa e di discesa, Se si usa questo descrittore, si deve usare anche il descrittore 'units-per-em'.

'mathline' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per la linea di riferimento matematica di un font. Se non è definito, il programma utente può usare la linea di riferimento centrale. Se si usa questo descrittore, si deve usare anche il descrittore 'units-per-em'.

'topline' (Descrittore)
Valore:  <number>
Iniziale:  non definito
Media:  visuale

Questo è il descrittore per la linea di riferimento superiore di un font. Se non è definito, il programma utente può usare un valore approssimato come l'ascesa. Se si usa il descrittore, si deve usare anche il descrittore 'units-per-em'.

15.3.9 Esempi

Esempi(o):

Dato il seguente elenco di font:
Swiss 721 light chiaro & chiaro italico
Swiss 721 romano [roman], grassetto, italico, grassetto italico
Swiss 721 medium medio & medio italico
Swiss 721 heavy pesante & pesante italico
Swiss 721 black nero, nero italico, & nero #2
Swiss 721 Condensed romano, grassetto, italico, grassetto italico
Swiss 721 Expanded romano, grassetto, italico, grassetto italico

Le seguenti descrizioni di font potrebbero essere usate per renderli disponibili per il download.

@font-face {
    font-family: "Swiss 721";
    src: url("swiss721lt.pfr"); /* Swiss 721 light */
    font-style: normal, italic;
    font-weight: 200;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721.pfr"); /* The regular Swiss 721 */
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721md.pfr"); /* Swiss 721 medium */
    font-style: normal, italic;
    font-weight: 500;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
    font-style: normal, italic;
    font-weight: 700;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721blk.pfr"); /* Swiss 721 black */
    font-style: normal, italic;
    font-weight: 800,900; /* note the interesting problem that
                               the 900 weight italic doesn't exist */
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The condensed Swiss 721 */
    font-stretch: condensed;
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The expanded Swiss 721 */
    font-stretch: expanded;
}

15.4 Caratteristiche dei font

15.4.1 Introduzione alle caratteristiche dei font

In questa sezione sono elencate le caratteristiche dei font che sono risultate utili per la corrispondenza lato client, la sintesi e il download per piattaforme eterogenee che hanno accesso al Web. I dati possono essere utili per ogni media che necessita di usare i font sul Web per motivi diversi dall'inserimento fisico dei dati dei font all'interno del media.

Queste caratteristiche sono usate per caratterizzare i font. Non sono specifiche ai CSS o ai fogli di stile. Nei CSS ogni caratteristica è descritta da un descrittore dei font. Queste caratteristiche potrebbero anche essere correlate con nodi VRML, o strutture applicative CGM, o un API Java, o linguaggi alternativi dei fogli di stile. I font presi da un media e conservati in una cache proxy potrebbero essere ri-usati da un altro media, risparmiando tempo per il download e ampiezza di banda di rete, se viene usato nella sua interezza un comune sistema di caratteristiche dei font.

Un non-esaustivo elenco di questi media comprende:

15.4.2 Nome completo dei font

Questo è il nome completo di un particolare tipo in una famiglia di font. Di solito comprende una varietà di qualificatori testuali non-standard o di ornamenti aggiunti al nome di famiglia dei font. Può anche includere un nome di fonderia [foundry, termine tipografico] on un'abbreviazione, spesso preposti al nome di famiglia dei font. Si usa solo per far riferimento a font installati localmente, poichè il formato del nome ornato può variare da piattaforma a piattaforma. Deve essere racchiuso fra virgolette.

Per esempio, il nome di famiglia dei font del font TrueType e quello del font PostScript possono differire nell'uso dei caratteri di spazio, nella punteggiatura, e nell'abbreviazione di alcune parole (per esempio per venire incontro a vari sistemi o limitazioni dell'interprete della stampante sulla lunghezza dei nomi). Per esempio, gli spazi non sono permessi in un nome PostScript, ma sono comuni nei nomi completi dei font. La tabella dei nomi TrueType può anche contenere il nome PostScript, che non ha spazi.

Il nome della definizione dei font è importante perchè è il collegamento a tutti i font installati localmente. È importante che il nome sia robusto, secondo l'indipendenza dalla piattaforma e dall'applicazione. Per questo motivo, il nome non dovrebbe essere specifico di un'applicazione o di un linguaggio.

La soluzione ideale sarebbe quella di avere un nome che identifichi univocamente ogni collezione di dati dei font. Questo nome non esiste nella pratica corrente per i dati dei font. I font con lo stesso nome di tipo possono variare su un numero di descrittori. Alcuni di questi descrittori, come differenti complementi dei glifi nei font, possono essere insignificanti se i glifi richiesti sono nel font. Atri descrittori, come differenti ampiezze metriche, rendono i font con lo stesso nome incompatibili. Non sembra possibile definire una regola che identificherà sempre le incompatibilità, ma non impedirà l'uso di una copia locale perfettamente adattabile dei dati dei font con un dato nome. Per questo motivo, solo il campo dei caratteri ISO 10646 sarà usato per qualificare le corrispondenze per i nomi del tipo dei font.

Poichè un primo obiettivo del nome del tipo dei font nella definizione dei font è quello di consentire al programma utente di determinare se c'è una copia locale dei dati dei font specificati, il nome deve essere tale da trovarsi in tutte le copie legittime dei dati dei font. Altrimenti si può generare un traffico Web non necessario a causa di mancate corrispondenze della copia locale.

15.4.3 Unità coordinate sul riquadro em

Alcuni valori, come le ampiezze metriche, sono espresse in unità relative ad un riquadro astratto la cui altezza è la distanza definita fra le linee di carattere nella stessa dimensione di carattere. Questo riquadro è chiamato riquadro em ed è la griglia di disegno su cui sono definiti i contorni dei glifi. Il valore di questo descrittore specifica in quante unità è diviso il riquadro EM. Valori comuni sono per esempio 250 (Intellifont), 1000 (Type 1) e 2048 (TrueType, TrueType GX e OpenType).

Se questo valore non è specificato, diventa impossibile conoscere qaulsiasi significato delle metriche dei font. Per esempio, un font ha glifi minuscoli di altezza 450; un altro ne ha di più piccoli di altezza 890! I numeri sono effettivamente frazioni; il primo font ha 450/1000 e il secondo 890/2048 che è effettivamente più piccolo.

15.4.4 Linea di riferimento centrale

Questa da la posizione nel riquadro em della linea di riferimento centrale. La linea di riferimento centrale è usata dalle scritture ideogrammatiche per l'allineamento, come la linea di riferimento inferiore è usata per le scritture latine. greche e cirilliche.

15.4.5 Codifica dei font

Esplicitamente o implicitamente, ogni font ha una tabella associata ad esso, la tabella di codifica dei font, che dice quale carattere rappresenta ogni glifo. Ci si riferisce a questa tabella anche come ad un vettore di codifica.

Infatti molti font contengono diversi glifi per lo stesso carattere. Quale di questi glifi debba essere usato dipende dalle regole della lingua oppure dalla preferenza del designer.

In arabo, per esempio, tutte le lettere hanno quattro (o due) differenti forme, a seconda se la lettera è usata all'inizio di una parola, in mezzo, alla fine o isolata. È lo stesso carattere in tutti i casi, e così c'è solamente un carattere nel documento sorgente, ma all'atto della stampa appare ogni volta differente.

Ci sono anche font che lasciano al designer grafico la scelta fra varie alternative di forme fornite. Purtroppo i CSS2 non fonriscono ancora i mezzi per selezionare queste alternative. Allo stato attuale da questi font viene scelta sempre la forma predefinita.

15.4.6 Nome della famiglia di font

Specifica una parte del nome della famiglia di un nome del tipo di font. Per esempio, il nome della famiglia per Helvetica-Bold è Helvetica e quello di ITC Stone Serif Semibold Italic è ITC Stone Serif. Alcuni sistemi trattano gli ornamenti relativi ai tipi espansi o condensati come se fossero parte del nome della famiglia.

15.4.7 Larghezze dei caratteri

Questo è un elenco di larghezze, sulla griglia di disegno, per il glifo corrispondente a ciascun carattere. Questo elenco è ordinato secondo il punto di codice ISO10646. Le larghezze non possono essere proficuamente specificate se più di un glifo è correlato allo stesso carattere o se vi sono legature obbligatorie.

15.4.8 Ampiezza del gambo orizzontale

Questo valore si riferisce al gambo dominante del font. Possono esservi due o più ampiezze designate. Per esempio, i gambi verticali principali dei caratteri Roman differiranno dai gambi sottili sulle "M" e "N" con grazie, ed in più possono esservi differenti ampiezze per i caratteri maiuscoli e minuscoli nell stesso font. Ancora: sia per disegno che per errore, tutti i gambi possono avere ampiezze molto differenti.

15.4.9 Altezza dei caratteri maiuscoli

Questa misura è la coordinata y della parte superiore delle lettere maiuscole piane nelle scritture latina, greca e cirillica, misurata dalla linea di riferimento. Questo descrittore non è necessariamente utile per i font che non contengono glifi di queste scritture.

15.4.10 Altezza dei caratteri minuscoli

Questa misura è la coordinata y della parte superiore delle lettere minuscole non-accentate e non-ascendenti nelle scritture latina, greca e cirillica, misurata dalla linea di riferimento. Vengono usate lettere con la parte superiore piana, ignorando ogni zona di correzione ottica. Si usa di solito come rapporto fra altezze minuscole e maiuscole e come mezzo per comparare famiglie di font.

Illustrazione dell'altezza-x

Questo descrittore non è utile per i font che non contengono glifi di queste scritture. Poichè le altezze delle lettere maiuscole e minuscole sono spesso espresse come rapporto per comparare font differenti, può essere utile impostare le altezze maiuscole e minuscole sullo stesso valore per le scritture unicamerali come l'ebraico, dove per un testo misto latino-ebraico, i caratteri ebraici sono di solito impostati ad un'altezza a metà strada fra le altezze maiuscole e minuscole del font latino.

Altezza dei caratteri ebraici

15.4.11 Linea di riferimento inferiore

Questo da la posizione nel riquadro em della linea di rifeirmento inferiore. La linea di riferimento inferiore è usata dalle scritture latina, greca e cirillica per l'allineamento così come la linea di riferimento superiore è usata per le scritture derivate dal sanscrito.

15.4.12 Linea di riferimento matematica

Questo da la posizione nel riquadro em della linea di riferimento matematica. La linea di riferimento matematica è usata da simboli matematici per l'allineamento, così come la linea di riferimento inferiore è usata per le scritture latina, greca e cirillica.

15.4.13 Riquadro di delimitazione massimo

Il riquadro di delimitazione massimo è il rettangolo più piccolo che racchiude la forma che risulta se tutti i glifi nel font sono posizionati con le loro origini coincidenti, e quindi raffigurati.

Se un font scaricabile dinamicamente è stato generato da un sottoinsieme di un font genitore, il bbox [bbox, riquadro di delimitazione] dovrebbe essere quello del font genitore.

15.4.14 Altezza massima esclusi gli accenti

Questa misura, sul riquadro em, va dalla linea di riferimento al punto più alto raggiunto da ogni glifo, esclusi gli accenti e i segni diacritici.

Diagramma che mostra diversi glifi e l'altezza massima esclusi gli accenti

15.4.15 Profondità massima esclusi gli accenti

Questa misura, sul riquadro em, va dalla linea di riferimento al punto più basso raggiunto da ogni glifo, esclusi gli accenti e i segni diacritici.

Diagrammma che mostra diversi glifi e la profondità massima esclusi gli accenti

15.4.16 Numero di Panose-1

Panose-1 è una classificazione standard industriale e tecnologia di corrispondenza dei font TrueType. Il sistema PANOSE consiste di un insieme di dieci numeri che classificano gli attributi chiave di un carattere latino, di una procedura di classificazione per creare questi numeri, e un programma Mapper che determina la corrispondenza più vicina possibile di font dato un insieme di caratteri. Il sistema potrebbe, con delle modifiche, essere usato anche per il greco e il cirillico, ma non è adatto per scritture unicamerali e ideografiche (ebraico, armeno, arabo, cinese/giapponese/coreano).

15.4.17 Gamma dei caratteri di ISO 10646

Questo indica il repertorio dei glifi del font, relativo a ISO 10646 (Unicode). Poichè tale repertorio è scarso (molti font non coprono la totalità di ISO 10646), questo descrittore elenca blocchi o campi che hanno una qualche copertura (non si promette una copertura completa) ed è usato per eliminare font inadatti (quelli che non avranno i glifi richiesti). Non indica che il font ha effettivamente i glifi richiesti, ma solo che è importante da scaricare e da prendere in considerazione. Si veda [ISO10646] per informazioni su documenti utili.

Questo metodo si può estendere a future allocazioni di caratteri in Unicode, senza cambiamenti nella sintassi e senza invalidare il contenuto esistente.

I formati dei font che non includono questa informazione, direttamente o indirettamente, possono ancora usare questa caratteristica, ma il valore deve essere fornito dall'autore del documento o del foglio di stile.

Ci sono altre classificazioni nelle scritture, come il sistema Monotype (si veda [MONOTYPE]) e un proposto sistema di scrittura ISO. Essi non sono prontamente estensibili.

Per questo motivo, in queste specifiche viene usata la classificazione dei repertori di glifi secondo la gamma [range, anche "campo", in senso matematico] di caratteri ISO 10646 che può essere rapprsentata con un particolare font. Questo sistema può essere esteso per coprire ogni futura allocazione.

15.4.18 Linea di riferimento superiore

Questo da la posizione nel riquadro em della linea di riferimento superiore. La linea di riferimento superiore è usata per l'allineamento dalle scritture derivate dal sanscrito, proprio come la linea di riferimento inferiore è usata per le scritture latina, greca e cirillica.

15.4.19 Ampiezza del gambo verticale

Questa è l'ampiezza dei gambi verticali (o quasi-verticali) dei glifi. Questa informazione è spesso veicolata come suggerimento, e può non essere direttamente accessibile in alcuni formati di font. La misura dovrebbe essere per il gambo verticale dominante nel font poichè potrebbero esserci vari raggruppamenti di gambi verticali (per esempio uno principale, ed uno di peso inferiore per le maiuscole M o N).

15.4.20 Angolo di inclinazione verticale

Questo è l'angolo, misurato in gradi in senso antiorario dalla verticale, dei tratti verticali dominanti del font. Il valore è negativo per i font che sono inclinati a destra, come quasi tutti i font italici. Questo descrittore può anche essere specificato per i font obliqui, inclinati [slanted], di scrittura corsiva, e in generale per ogni font i cui tratti verticali non sono perfettamente verticali. Un valore non-zero non indica di per sè un font italico.

15.5 Algoritmo di corrispondenza dei font

Queste specifiche estendono l'algoritmo dato nelle specifiche CSS1. Questo algoritmo si riduce a quello delle specifiche CSS1 se i fogli di stile dell'autore e del lettore non contengono nessuna regola @font-face.

La corrispondenza descrittori-tipi di font deve essere fatta con attenzione. I descrittori sono selezionati in un ordine ben definito per assicurare che i risultati del processo di corrispondenza siano il più possibile consistenti da un programma utente all'altro (presupponendo che a ciascuno di essi sia presentata la stessa libreria di tipi di font e di descrizioni dei font). Questo algoritmo può essere ottimizzato, facendo in modo che un'implementazione si comporti come se l'algoritmo fosse stato seguito esattamente.

  1. Il programma utente crea (o accede a) un database dei descrittori rilevanti dei tipi di font di tutti i font di cui il programm utente è a conoscenza. Se vi sono deu font con esattamente gli stessi descrittori, uno di essi viene ignorato. Il programma utente può essere a conoscenza di un font poichè:
  2. Per un dato elemento e per ogni carattere in quell'elemento, il programma utente assembla le proprietà dei font applicabili a quell'elemento. Usando l'insieme completo di proprietà, il programma utente usa il descrittore 'font-family' per scegliere una famiglia di font provvisoria. Così la corrispondenza per un nome di famiglia avrà successo ancor prima della corrispondenza con qualche altro descrittore. Le rimanenti proprietà vengono provate contrastivamente rispetto alla famiglia secondo i criteri di corrispondenza descritti per ogni descrittore. Se vi sono corrispondenze per tutte le rimanenti proprietà, allora questa è il tipo di font corrispondente per l'elemento dato.
  3. Se non vi è tipo di font corrispondente all'interno di 'font-family', processata al punto 2, i programmi utente che implementano la corrispondenza intelligente possono procedere con l'esame di altri descrittori, come l'altezza-x, le larghezze dei caratteri e panose-1 per indentificare una differente famiglia di font provvisoria. Se vi sono corrispondenze per tutti i rimanenti descrittori, allora questo è il corrispondente tipo di font per l'elemento dato. Il descrittore 'font-family', riflesso nelle proprietà CSS2, è la famigla dei font richiesta, non un qualsivoglia nome che il font selezionato in modo intelligente può avere. Si ritiene che programmi utente che non implementano la corrispondenza intelligente falliscano in questo punto.
  4. Se non vi è tipo di font corrispondente all'interno di 'font-family', processata al punto 3, i programmi utente che implementano il download dei font possono procedere con l'esame del descrittore 'src' del tipo di font provvisorio identificato ai punti 2 o 3 per identificare una risorsa di rete disponibile, e il formato corrente. Se vi sono corrispondenze per tutti i rimanenti descrittori, allora questo è il corrispondente tipo di font per l'elemento dato e il programma utente può cercare di scaricare questa risorsa. Il programma utente può scegliere di bloccare questo download o di procedere al punto successivo mentre scarica il font. Si ritiene che i programmi utente che non implementano il download dei font, o che non sono connessi ad una rete, o dove le preferenze dell'utente hanno disabilitato il download dei font, o dove la risorsa richiesta non è disponibile per una qualunque ragione, o dove il font scaricato non può essere usato per una qualunque ragione, falliscano in questo punto.
  5. Se non vi è tipo di font corrispondente all'interno di 'font-family', processata al punto 3, i programmi utente che implementano la sintesi dei font possono procedere con l'esame di altri descrittori come 'x-height', larghezze dei caratteri e 'panose-1' per identificare una famiglia di font provvisoria per la sintesi. Se vi sono corrispondenze per tutti i rimanenti descrittori, allora questo è il tipo di font corrispondente per l'elemento dato e la sintesi del font fittizio può iniziare. Si ritiene che i programmi utente che non implementano la sintesi dei font falliscano in questo punto.
  6. Se i punti 3, 4 e 5 falliscono, e se c'è una successiva 'font-family' alternativa nell'insieme dei font, allora si ripeta dal punto 2 con la successiva 'font-family' alternativa.
  7. Se c'è un tipo di font corrispondente, ma che non contiene glifi per i caratteri correnti, e se c'è una successiva 'font-family' alternativa negli insiemi di font, allora si ripeta dal punto 2 con la successiva 'font-family' alternativa. Il descrittore 'unicode-range' può essere usato per eliminare rapidamente dall'analisi quei tipi di font che non hanno i glifi corretti. Se il descrittore 'unicode-range' indica che il font contiene alcuni glifi nel campo corretto, può essere seaminato dal programma utente per vedere se ha quel tipo particolare.
  8. Se non vi è alcun font all'interno della famiglia selezionata al punto 2, allora si usi il valore ereditato o dipendente dal programma utente 'font-family' e si ripeta dal punto 2, usando la migliore selezione che si può ottenere all'interno di questo font. Se un particolare carattere non può essere visualizzato usando questo font, il programma utente dovrebbe indicare che un carattere non viene visualizzato (per esempio usando il glifo 'missing character' [missing character, carattere mancante]).
  9. I programmi utente che implementano la resa progressiva ed hanno un download di font in attesa possono, una volta che il download è avvenuto con successo, usare il font scaricato come famiglia di font. Se il font scaricato manca di alcuni glifi che il font temporaneo progressivo conteneva, il font scaricato non viene usato per quel carattere e il font temporaneo continua ad essere usato.

Nota. L'algoritmo di cui sopra può essere ottimizzato per evitare di dover rivisitare le proprietà CSS2 per ogni carattere.

Le regole di corrispondenza per-descrittore di cui sopra (2) sono le seguenti:

  1. 'font-style' viene provata per prima. 'italic' sarà soddisfatta se c'è un tipo nel database di font del programma utente designato dalla parola chiave CSS 'italic' (preferita) o 'oblique'. Atrimenti i valori devono corrispondere esattamente o lo stile del font fallirà.
  2. 'font-variant' viene provata come seguente. 'normal' corrisponde a un font non designato come 'small-caps'; 'small-caps' corrisponde (1) a un font designato come 'small-caps', (2) un font in cui il maiuscoletto è sintetizzato, o (3) un font dove tutte le lettere minuscole sono rimpiazzate da lettere maiuscole. Un font maiuscoletto può essere sintetizzato scalando elettronicamente le lettere maiuscole di un font normale.
  3. 'font-weight' è selezionata come seguente, e non fallirà mai. (Si veda 'font-weight' di cui sotto.)
  4. 'font-size' deve essere selezionata all'interno di un margine di tolleranza dipendente dal programma utente. (Di solito le dimensioni per i font scalabili sono arrotondate al pixel più vicino, mentre la tolleranza per i font bitmap potrebbe essere pari al 20%.) Calcoli ulteriori, per esempio con valori 'em' in altre proprietà, si basano sul valore di 'font-size' usato, non su quello specificato.

15.5.1 Mappare i valori di peso dei font rispetto ai nomi dei font

I valori della proprietà 'font-weight' sono dati su una scala numerica in cui il valore '400' (o 'normal') corrisponde al tipo di testo "normale" per quella famiglia. Il nome del peso associato con quel tipo sarà di solito Book, Regular, Roman, Normal o a volte Medium.

L'associazione di altri pesi all'interno della famiglia a valori di peso numerici è da intendersi unicamente allo scopo di preservare l'ordinamento dei pesi all'interno di quella famiglia. I programmi utente devono correlare i nomi ai valori in modo da preservare l'ordine visuale; un tipo correlato ad un valore non deve essere più chiaro di tipi correlati a valori più bassi. Non c'è garanzia su come il programma utente correlerà i tipi di font all'interno di una famiglia con i valori di peso. Tuttavia la seguente euristica spiega come è realizzato l'assegnamento nei casi tipici:

Non vi è alcuna garanzia che ci sarà un tipo più scuro per ciascuno dei valori 'font-weight'; per esempio, alcuni font possono avere solo un tipo normale e grassetto, altri possono avere otto differenti pesi di tipo.

I due esempi seguenti mostrano mappature tipiche.

Si presuppongano quattro pesi nella famiglia "Rattlesnake", dal più chiaro al più scuro: Regular, Medium, Bold, Heavy.

Primo esempio di mappatura del peso dei font
Tipi disponibili Assegnazioni Colmare i vuoti
"Rattlesnake Regular" 400 100, 200, 300
"Rattlesnake Medium" 500  
"Rattlesnake Bold" 700 600
"Rattlesnake Heavy" 800 900

Si presuppongano sei pesi nella famiglia "Ice Prawn": Book, Medium, Bold, Heavy, Black, ExtraBlack. Si noti che in questa circostanza il programma utente ha deciso di non assegnare un valore numerico a "Example2 ExtraBlack".

Secondo esempio di mappatura del peso dei font
Tipi disponibili Assegnazioni Colmare i vuoti
"Ice Prawn Book" 400 100, 200, 300
"Ice Prawn Medium" 500  
"Ice Prawn Bold" 700 600
"Ice Prawn Heavy" 800  
"Ice Prawn Black" 900  
"Ice Prawn ExtraBlack" (none)  

15.5.2 Esempi di corrispondenza dei font

Esempi(o):

Il seguente esempio definisce uno specifico tipo di font, Alabama Italic. Vengono forniti anche una descrizione del font con panose e una risorsa URI per scaricare un font in formato TrueType. I descrittori del peso del font e dello stile del font sono forniti per descrivere il font. La dichiarazione dice che il peso corrisponderà ad ogni richiesta nel campo da 300 a 500. La famiglia del font è Alabama e il nome ornato del font è Alabama Italic.

@font-face {
  src: local("Alabama Italic"),
       url(http://www.fonts.org/A/alabama-italic) format("truetype");
  panose-1: 2 4 5 2 5 4 5 9 3 3;
  font-family: Alabama, serif;
  font-weight:   300, 400, 500;
  font-style:  italic, oblique;
}

Esempi(o):

Il prossimo esempio definisce una famiglia di font. Viene fornito un singolo URI per ottenere i dati dei font. Questo file di dati conterrà stili e pesi multipli del font nominato. Una volta che una di queste definizioni @font-face è stata privata dei rimandi, i dati saranno nella cache del programma utente a disposizione di altri tipi che usano il medesimo URI.

@font-face {
  src: local("Helvetica Medium"),
       url(http://www.fonts.org/sans/Helvetica_family) format("truedoc");
  font-family: "Helvetica";
  font-style: normal
}
@font-face {
  src: local("Helvetica Oblique"),
       url("http://www.fonts.org/sans/Helvetica_family") format("truedoc");
  font-family: "Helvetica";
  font-style: oblique;
  slope: -18
}

Esempi(o):

Il seguente esempio raggruppa tre font fisici in un font virtuale con copertura estesa. In ciascun caso viene dato il nome ornato del font nel descrittore src, per permettere a versioni installate localmente di essere usate preferenzialmente se disponibili. Una quarta regola punta ad un font con la stessa copertura, ma contenuta in una singola risorsa.

@font-face {
  font-family: Excelsior;
  src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
  unicode-range: U+??; /* Latin-1 */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
  unicode-range: U+100-220; /* Latin Extended A and B */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
  unicode-range: U+4??; /* Cyrillic */
}
@font-face {
  font-family: Excelsior;
  src: url("http://site/excels") format("truedoc");
  unicode-range: U+??,U+100-220,U+4??;
}

Esempi(o):

Il prossimo esempio potrebbe essere rintracciato in un foglio di stile predefinito di un programma utente. Implementa la famiglia generica CSS2 di font serif correlandola con un'ampia varietà di font serif che potrebbero esistere su varie piattaforme. Le metriche non vengono fornite, poichè variano fra le possibili alternative.

@font-face {
  src: local("Palatino"),
	  local("Times New Roman"),
	  local("New York"),
	  local("Utopia"),
	  url("http://somewhere/free/font");
  font-family: serif;
  font-weight: 100, 200, 300, 400, 500;
  font-style: normal;
  font-variant: normal;
  font-size: all
}