L'altezza della riga è determinata dal primo carattere in uno stack di font CSS?

Question

Chiedo questo perché quando provo a creare uno stack di font CSS per contenuti multilingua, come inglese e cinese, il rendering finale è influenzato dal primo font nello stack (di solito quelli latini, dato che la maggior parte dei font cinesi viene fornito con Supporto latino).

Vedere this Codepen, ad esempio.

div.a p { 
    overflow: hidden; 
} 

p { 
    background-color: red; 
    border: 1px solid black; 
    display: inline-block; 
} 

.chinese-only { 
    font-family: "Hiragino Sans GB", sans-serif; 
    font-size: 24px; 
    line-height: 48px; 
} 

.english-chinese { 
    font-family: "Avenir Next", "Hiragino Sans GB", sans-serif; 
    font-size: 24px; 
    line-height: 48px; 
} 

.chinese-english { 
    font-family: "Hiragino Sans GB", "Avenir Next", sans-serif; 
    font-size: 24px; 
    line-height: 48px; 
} 

quello che sto vedendo:

Dal glifi cinesi appaiono solo nel Hiragino Sans GB, mi aspetto che tutti i blocchi cinesi di utilizzare la stessa altezza della linea. Ma sono apparentemente interessati dall'aggiunta del font Avenir Next in cima allo stack.

Poiché sia ​​Firefox che Chrome su OSX rendono il mio esempio lo stesso, mi chiedo se le specifiche CSS non menzionino nulla al riguardo. CSS 2.1 fonts spec non sembra indicare cosa fare con l'altezza della linea quando si esegue il fallback su glifi mancanti.

Aggiornato: Safari non rende in modo diverso, ma purtroppo la differenza è dovuta al overflow: hidden, non glifo fallback. Il mio updated example potrebbe mostrare questo un po 'più chiaro.

Su Chrome e Firefox

On Safari

E se siete veramente in mal di testa correlati ai font, provare this example mostrando diverse pile di carattere, e vedere come si differenziano per ciascun browser.

Answer 1

Questo è praticamente destinato agli agenti utente. Ogni volta che la specifica CSS dice "non definito da questa specifica", questo è il codice per "lasceremo che i browser facciano tutto ciò che pensano sia meglio e poi cerchiamo di far sì che tutti si comportino in modo coerente dopo alcuni anni di farlo in modo diverso".

Inoltre, l'ultima CSS Inline modulo layout afferma proprio in cima di Section 1 (Line Heights and Baseline Alignment):

questa sezione viene riscritto. Fare riferimento alla sezione 10.8 di [CSS21] per la definizione di normativa CSS o alla bozza di lavoro 2002 se si desiderano immagini carine. (Ma ignorate il vecchio testo, metà è sbagliato. Non stiamo specificando quale metà, è da determinare.)

Questo è del mese scorso. Quindi, sai, buona fortuna e Godspeed, in pratica.

interessante, vedo un risultato diverso in Safari 6.2.2 che avete inviato:

Se c'è una differenza tra questo e l'ultimo Safari, si potrebbe essere in grado di rintracciare un bugfix tra le due versioni che spiega perché è cambiato.