come modificare l'altezza della riga 'inner' del testo css

Question

Sto provando a lavorare con un font icona chiamato entypo. Il font è fantastico, ma il padding scelto dallo sviluppatore è orrendo e rende questo font esasperante con cui lavorare. Le icone sono davvero buone e sto solo cercando di farlo funzionare.

Cosa si riduce a fare sembrare il carattere "normale", la dimensione del carattere deve essere enorme (come 40px +).

Se si sta tentando di inserire l'icona in uno spazio di 15px di altezza, la dimensione del font sarà di 40px e quindi c'è tutto lo spazio extra che è necessario affrontare.

Ho provato a fissare esplicito altezza, lineHeight esplicito, verticale-allineamento, in ogni combinazione concepibile, e il risultato è differenct fra PC e mac.

L'unica cosa che posso pensare è che lo 'spazio rimanente' viene gestito in modo diverso dai diversi sistemi operativi.

C'è qualche proprietà CSS di cui non sono a conoscenza che risolverà questo problema?

PC

MAC

questo è il hackish CSS che ho usato per cercare di azzerare fuori come meglio potevo. Tieni presente che ho già provato a giocare con altezza e altezza della linea, è sempre lo stesso problema, il PC lo mette sempre al di sotto del punto in cui Mac lo mette.

.icon { 
    font-family: 'entypo'; 
    display: inline-block; 
    color: #000; 
    font-size: 40px; 
    line-height: 0; 
    height: 0; 
    vertical-align: middle; 
} 

Per il bene di quelle immagini di cui sopra di demo a voi ragazzi, queste sono le caratteristiche che ho aggiunto: height: 20px; width: 20px; background: red; solo per dimostrare come rende in modo così diverso.

Answer 1

Ho riscontrato lo stesso problema. Non sono sicuro che la mia soluzione sia eccezionale, ma la pubblicherò per vedere se è possibile iniziare una discussione.

.icon { 
    font-family: 'Entypo'; 
    position: absolute; 
    font-size: 40px; 
    height: 20px; 
    width: 20px; 
    margin-left: -20px; /* This will force it to live before the containing element, so the container may need 20px of padding-left */ 
    margin-top: -1px; /* Just because it was still sitting one pixel to low for my eye */ 
    text-align: center; 

}

Sono una persona di speranza ha un'idea di come per ottenere questo risultato senza dover aggiungere l'imbottitura all'elemento che contiene. Tuttavia, era l'unico modo in cui avrei potuto farlo funzionare con il posizionamento assoluto che è ciò che sembra permetterci di "tagliare" il padding extra sul carattere dell'icona.

Answer 2

Beh, sarebbe bello vedere l'HTML, ma forse sarebbe utile un riempimento, ad esempio padding:3px;.

Answer 3

bug è stato risolto con jQuery;)

Basta aggiungere questa pagina: line-height

<script> 
$(document).ready(function(){ 
var isMacLike = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)?true:false; 
var isIOS = navigator.platform.match(/(iPhone|iPod|iPad)/i)?true:false; 

if(isMacLike || isIOS) 
    {  
     //alert("mac!!!"); 
     $(".entypoclass").css("margin-top","11px"); 
    } 
    else 
     { 
      // alert("pc!"); 
     } 
}); 
</script> 

Answer 4

Entypo's di default è incasinato.

Fortunatamente, qualcuno oltre a Fontello ha trascorso un po 'di tempo a risolvere in su. Funziona.

Answer 5

La mia soluzione è:

icon{ 
    line-height:0px; 
    overflow:hidden; 
    display:inline-block; 
    font-size:75px; 
    font-family:'entypo'; 
    text-align:center; 
    height:37px; 
    width:37px; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased 
}