@ Font-face problema, Firefox aggiunge imbottitura, Chrome non

Question

Quando si utilizza un carattere personalizzato tramite @font-face, non rende proprio come penso che dovrebbe in Chrome. In Firefox, però, imbottitura supplementare (superiore e inferiore) viene aggiunto al tipo di carattere.

Qui è la mia pagina di esempio che illustra il problema .

C'è qualcosa che posso fare?

Answer 1

Cordiali saluti, questo accade anche in Firefox su Linux (e non in cromo). Ho provato a caricare il carattere in FontForge e ottenuto immediatamente un avvertimento:

  

La tabella (s) di un font sono state ignorate dai FontForge
  Ignoring 'LTSH' lineare tavolo soglia
  Ignoring 'VDMX' verticale metriche dei dispositivi tavolo
  Ignoring 'hdmx' orizzontale tabella metriche dispositivo

Credo che il problema è che il VDMX (Vertical dispositivo Metrics) tavolo è difetto:

  

Per evitare il montaggio della griglia   intero font per determinare la corretta   altezza, la tabella è stata VDMX   definito.

Questa appare esattamente come quello che succede in Firefox: da qualche parte la minima e massima altezza viene calcolata in modo errato. Questo è anche chiaro quando si seleziona il testo: la casella di selezione si estende al massimo superiore e inferiore della linea; se l'elemento h1 aveva davvero imbottitura, si dovrebbe vedere un divario tra la parte superiore e inferiore della linea e la casella di selezione.

Inoltre, la convalida ha rivelato che quasi ogni glifo è “ punti mancanti in extrema ”:

  

Sia PostScript e TrueType sarebbe   come voi di avere punti al maxima   e minimi (gli estremi) di un percorso.

Una rapida ricerca mostrato:

  

L'unico altro problema che ho avuto è stato un   piuttosto sgradevole condizione chiamata "Missing   Punti a Extrema". Con un tipo di carattere,   ci deve essere un punto (o nodo, come   vengono chiamati in Inkscape) presso il   estrema sinistra, destra, superiore e inferiore   un glifo. Normalmente esistono   in ogni caso semplicemente a causa del modo in cui il   glifo è costruito, ma le linee diagonali   con estremità arrotondate spesso causano problemi    [fonte, incluso il quadro (scorrimento verso il basso)]

Answer 2

Just Add:

line-height:1;

per le regole CSS