Correggere l'altezza del carattere personalizzato con CSS

Question

Ho riscontrato uno strano problema durante l'utilizzo di un carattere personalizzato su una nuova webapp su cui sto lavorando.

Questo carattere personalizzato (FF DIN) sembra avere un'altezza di riga fuori centro, verticale e naturale, che mi costringe a mettere un po 'di modellatura per compensare lo spazio superiore sul pulsante e sull'ingresso come elemento.

Esempio: il tipo di carattere in verde (Helvetica Neue) sia correttamente allineare, in cui il carattere personalizzato che utilizziamo (FF DIN) è verticale fuori centro:

Esiste un modo noto per risolvere questo problema di centratura sul CSS in modo naturale, in qualche modo per forzare il comportamento di base dei font?

Grazie.

Answer 1

Alla fine, ho finiscono per fissare manualmente il tipo di carattere stesso, utilizzando l'aiuto di questa risposta:

UIButton custom font vertical alignment

Answer 2

Questo è qualcosa che ho incontrato di recente. La linea di base sui font che stavo usando per qualche motivo non si allineava, quindi mi sono allineato al fondo e aumentato l'altezza della linea invece di aggiungere padding.

Questo è il modo in cui ho risolto il problema, se si dispone di un collegamento a una penna di codice, posso verificare se funzionerà per voi o se un'altra soluzione sarebbe migliore.

p { 

    vertical-align: text-bottom; 
    line-height: 1.5; 

} 

Answer 3

Il problema qui non è l'altezza della linea ma il posizionamento verticale dei glifi, in particolare la posizione della linea di base del testo. Questo è qualcosa su cui il designer di font ha deciso; il designer disegna i glifi e li posiziona nel quadrato em, il dispositivo concettuale che ha altezza uguale o definita all'altezza del carattere. In particolare, il progettista decide quanto spazio c'è sotto la linea di base da una parte e sopra l'altezza delle lettere maiuscole dall'altra. In genere questi spazi sono uguali o quasi uguali, ma non è necessario. Se sono sostanzialmente diversi, l'uso previsto del font è probabilmente speciale e non include l'utilizzo come quello mostrato nell'immagine. Questo suggerisce che la scelta del font debba essere riconsiderata, ma supponiamo che sia fissa.

Ci sono diversi modi per affrontare il problema. Se c'è troppo spazio sotto le lettere, ridurre line-height lo rende più piccolo, ma influenza anche lo spazio sopra. L'imbottitura superiore aiuta in un certo senso, ma aumenta l'altezza totale occupata dall'elemento. È anche possibile giocare con vertical-align, ma influisce sull'altezza delle caselle di riga.

Probabilmente l'approccio più semplice è quello di utilizzare il posizionamento relativo , partendo dal presupposto che il problema riguardi un testo di una sola riga. Il posizionamento relativo sposta semplicemente il contenuto in un modo specificato, senza influenzare altrimenti il ​​layout. Avresti bisogno di un wrapper per questo, cioè di un elemento che contiene il testo, in modo da poter spostare solo il testo, non lo sfondo.

La seguente demo utilizza un carattere Google, Candal, che presenta un problema simile, ma in una direzione diversa: la linea di base è troppo bassa. Le modifiche di questo approccio per soddisfare il problema originale dovrebbero essere ovvie, ma l'esatta quantità di spostamento deve essere determinata empiricamente (o da informazioni estratte dal file di font usando un inspector di font). Naturalmente, l'unità em deve essere utilizzata qui, anche se si imposta la dimensione del carattere in pixel o punti (in modo che il codice non debba essere modificato se la dimensione del carattere viene modificata un giorno).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'> 
 
<style> 
 
div { font-family: Candal } 
 
div { background: lightgreen; font-size: 200%} 
 
</style> 
 
<p>What we have got initially: 
 
<div>BRAKE HOSE AND AIR CHAMBER</div> 
 
<p>Reducing line height (even “setting solid”) does not really help: 
 
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div> 
 
<p>But displacing the text upwards by 0.1em does: 
 
<div><span style="position: relative; bottom: 0.1em"> 
 
BRAKE HOSE AND AIR CHAMBER</span></div>

Answer 4

ho avuto quel problema aswell in passato, anche i browser diversi hanno dato diverse altezze di linea! Penso che accada quando si utilizza il generatore di webfont e può essere risolto solo con l'utilizzo di un'altezza di linea diversa per quanto ne so.

Hai provato fontsquirrel? Ci sono alcune opzioni con risultati diversi.

http://everythingfonts.com/font-face

http://www.font2web.com/

http://www.fontsquirrel.com/tools/webfont-generator

https://www.web-font-generator.com/

Answer 5

In Chrome ho scoperto che se si utilizza una dichiarazione di carattere. Puoi risolvere il problema dell'altezza della linea con uno stile = "" chiama l'HTML, o semplicemente dichiarando l'altezza della linea DOPO la dichiarazione del font nel tuo CSS.

Penso che Chrome non sappia solo come calcolare l'altezza della linea finché non viene reso il carattere personalizzato.