CSS carattere personalizzato offset verticale (bug?)

Question

Io uso di carattere personalizzato nel mio CSS con questo metodo:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'); 
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
.gabriola { 
    font-size: 20px; 
    line-height: 20px; 
    height: 20px; 
    background: red; 
} 

<div class="gabriola">Some texty text here</div> 

Ogni browser rende questo font di essa la propria strada con offset verticale superiore e inferiore come questo

Cosa sto sbagliando? Grazie

Answer 1

È possibile che non ci sia qualcosa che si sta sbagliando. Ecco alcuni punti che possono essere applicati, alcuni controllabili da te, altri no.

1. Solo per essere sicuri, impostare in modo esplicito vertical-align: baseline.
2. I diversi file (.eof, .woff, .ttf) non possono essere definiti nello stesso modo, pertanto i diversi browser utilizzano file diversi e mostrano differenze.
3. Non sono sicuro se avere due chiamate src è rovinare le cose, ma si può provare a eliminare il secondo:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'), 
     url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Queste sono tutte mere supposizioni. Dovrai testare # 1, 3. Se il problema è # 2, non sono sicuro che esista una soluzione elegante.

V'è, naturalmente, l'avvertenza sul this site:

Tenete a mente che il rendering dei font può variare notevolmente tra i browser e sistemi operativi . Molti sviluppatori hanno avuto risultati così scarsi da Windows e Internet Explorer che hanno evitato l'uso di font personalizzati . Assicurati sempre di esaminare attentamente i risultati su tutti i browser che puoi decidere se la qualità è accettabile.

Aggiornamento

This post dà alcuni suggerimenti riguardo alla possibilità di risolvere i problemi di rendering. Questo è per Font Squirrel, e osserva in particolare:

Se è stato scaricato il kit, si potrebbe provare a rigenerare il tipo di carattere con il generatore. Apportiamo aggiustamenti periodici al generatore che potrebbe migliorare l'hint o il rendering del font.

Ma conferma anche,

non passare la patata bollente, ma la causa più comune è un tipo di carattere cattivo originale .

Ciò vale per il punto 2.

Answer 2

Ho avuto lo stesso problema e la soluzione era di ricostruire il carattere con le proprietà dell'originale senza modificare nulla in un nuovo file con Hight logic font creator, il carattere è invariato e uguale al problema originale viene corretto e allineato alla perfezione in tutti i browser incluso ie6, è stato il lavoro di poche ore ma questo è il risultato nel caso in cui abbiate bisogno di un utente.

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

io so che è stato 5 anni da quando l'OP ha fatto la domanda, ma ho trovato questo grande tecnica su come ottenere il testo di base allineato correttamente.

In sostanza, il contenitore di testo deve essere un blocco in linea con altezza riga: 0; Poi, si crea un pseudo-elemento inline-block e impostare la sua altezza secondo la line-height si voleva:

span { 
 
    font-size: 2em; 
 
    background: red; 
 
} 
 
span.baseline-align { 
 
    vertical-align: baseline; 
 
} 
 

 
span.true-baseline-align { 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 
span.true-baseline-align::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 1em; // this is where you control line-height 
 
}

<span>Normal text</span> 
 
<br><br> 
 
<span class="baseline-align">With vertical-align: baseline</span> 
 
<br><br> 
 
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/