Quando si utilizza un carattere personalizzato tramite @font-face, viene eseguito il rendering proprio come penso dovrebbe in Chrome. In Firefox, tuttavia, il riempimento aggiuntivo (superiore e inferiore) viene aggiunto al carattere.@ problema font-face, Firefox aggiunge padding, Chrome non
Here is my example page that outlines the problem.
C'è qualcosa che posso fare al riguardo?
FYI, questo accade anche in Firefox su Linux (e non in Chromium). Ho cercato di caricare il tipo di carattere in FontForge e subito ottenuto un avvertimento:
La tabella seguente (s) nel font sono stati ignorati da FontForge
Ignorando 'LTSH' tabella di soglia lineare
Ignorando 'VDMX 'tabella verticale metriche dispositivo
Ignorando 'metriche dispositivo orizzontali hdmx' tavolo
credo che il problema è che la tabella è VDMX (Vertical Device Metrics) defec t:
Per evitare l'adattamento alla griglia l'intero font per determinare il corretto altezza, la tabella VDMX è stato definito.
Questo sembra esattamente quello che succede in Firefox: da qualche parte l'altezza minima e massima non viene calcolata correttamente. Ciò è chiaro anche quando si seleziona il testo: la casella di selezione si estende fino al limite superiore e inferiore della linea; se l'elemento h1 avesse effettivamente il padding, si vedrebbe uno spazio tra la parte superiore e inferiore della linea e la casella di selezione.
Inoltre, la convalida ha rivelato che quasi ogni glifo è “missing points at extrema”:
Sia PostScript e TrueType sarebbero come te di avere punti alla massimi e minimi (gli estremi) di un percorso.
Un rapido search mostrato:
L'unico altro problema che ho avuto è stato un piuttosto sgradevole condizione chiamata "Missing punti a Extrema". Con un font, , è necessario un punto (o nodo, come chiamato in Inkscape) allo estremo sinistro, destro, superiore e inferiore di un glifo.Normalmente sono lì comunque semplicemente a causa del modo in cui il glifo è costruito, ma le linee diagonali con estremità arrotondate sono spesso causa di problemi [source, including picture (scroll down)]
Grazie per l'ottima risposta! Sto anche usando GNU/Linux. Non so come appare in altri sistemi. Tuttavia, come posso aggiungere questa informazione mancante al font? Poiché Chrome effettivamente indovina, ci dovrebbero essere abbastanza informazioni nel carattere che lo rendono abbastanza facile da definire. Ma come? – Johan
@ Johan - Non sono sicuro. Se l'EULA del font lo consente, puoi provare a modificare il font con FontForge e vedere se questo aiuta. Comunque non sono un esperto di FontForge, la mia risposta è solo un'ipotesi educata. –
Ad ogni modo, la tua risposta è troppo buona per non essere accettata. Ho provato a caricarlo e salvarlo in fontforge e poi sembra uguale in FF e Chrome. Entrambi lo rendono come FF ha fatto dall'inizio. Ci sono tonnellate e tonnellate di parametri in fontforge. Giocherò con loro per un po ', poi mi arrenderò. :) – Johan
Just Add:
line-height:1;
alle vostre regole CSS
Anche se questo non sembra riguardare la risposta, è un'affermazione valida: Firefox può rendere le altezze delle righe al di sotto di 1 mentre Chrome non può, che può portare (anche con i paletti ereditati) a situazioni simili. – Paracetamol
Deadlink, sarebbe molto utile avere un'immagine da illustrare. –