wie 'innere' Lineheight von CSS-Text ändern

Question

Ich versuche, mit einer Symbolschriftart namens entypo zu arbeiten. Die Schriftart ist großartig, aber das Padding, das der Entwickler gewählt hat, ist schrecklich und macht diese Schriftart zu einem Ärgernis. Die Icons sind wirklich gut und ich versuche nur, es zum Laufen zu bringen.

Was es heißt, die Schrift "normal" aussehen zu lassen, muss die Schriftgröße sehr groß sein (wie 40px +).

Wenn Sie versuchen, das Symbol in einen Raum mit 15px Höhe zu passen, beträgt die Schriftgröße 40px, und dann gibt es den zusätzlichen Platz, den Sie benötigen.

Ich habe versucht, explizite Höhe, explizite Lineheight, vertikal ausrichten, in jeder denkbaren Kombination, und das Ergebnis ist zwischen PC und Mac unterscheiden.

Das einzige, was mir einfällt ist, dass 'übrig gebliebener Platz' von verschiedenen Betriebssystemen unterschiedlich gehandhabt wird.

Gibt es eine CSS-Eigenschaft, von der ich nicht weiß, dass sie das beheben wird?

PC

MAC

Dies ist sehr hackish CSS Ich versuche, und es verwendet, um so gut nullen ich konnte. Denken Sie daran, ich habe bereits versucht, mit Höhe und Zeilenhöhe zu spielen, es ist immer das gleiche Problem, PC legt es immer weit unter dem, wo Mac es setzt.

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

Aus Gründen der oben Bilder zu euch Demo, das sind die Eigenschaften I hinzugefügt: height: 20px; width: 20px; background: red; nur zu zeigen, wie es so anders macht.

Answer 1

Ich hatte das gleiche Problem. Ich bin mir nicht sicher, ob meine Lösung so großartig ist, aber ich poste sie, um zu sehen, ob wir eine Diskussion beginnen können.

.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; 

}

Ich bin hoffnungsvoll jemand eine Idee hat, wie dies zu erreichen, ohne die Polsterung enthaltenden Element hinzuzufügen. Es war jedoch die einzige Möglichkeit, dies mit der absoluten Positionierung arbeiten zu lassen, was es uns ermöglicht, die zusätzliche Füllung des Symbolcharakters zu "trimmen".

Answer 2

Nun wäre schön, die HTML zu sehen, aber vielleicht würde eine Auffüllung helfen, sagen padding:3px;.

Answer 3

Bug ist mit jquery fixiert;)

gerade diese auf Seite hinzufügen:

<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 Standard line-height vermasselt wird.

Glücklicherweise hat jemand über Fontello eine gewisse Zeit damit verbracht, es zu reparieren. Es klappt.

Answer 5

Meine Lösung ist:

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 
}