Größe von Icons aus TTFs

[wario]

Moin,

woran liegt es, dass Icons aus TTFs nie genau die Größen haben, die man ihnen über die font-size mitgibt, sondern immer ein wenig mehr (im Beispiel unten ist es die Höhe, bei FontAwesome glaube ich die Breite)?

Ich habe bspw. ein Icon aus einem Satz, dem ich die font-size 1.5rem (im konkreten Fall also 48px) gegeben habe. Das Pseudo-Element ::before hat wie gewünscht eine Höhe und Breite von 48px, das i-Element leider nur die Breite, die Höhe ist in diesem Beispiel aus unerfindlichen Gründen 58px.

Gibt es hier eine Möglichkeit, über CSS Abhilfe zu schaffen?

[Mr Ad]

[wario]

Auch hier kann gleich wieder zu, da ich von selbst auf die Lösung des Problems gekommen bin:

Fonts haben eine eigene line-height, die stärker ins Gewicht zu fallen scheint als die line-height und die Höhe des sie tragenden HTML-Elements, daher muss man diesen Wert anpassen.

article {
    max-height: 1.5rem;
    span,
    span::before {
        display: inline-block;
        font: normal normal normal 1.5rem 'FontMfizz';
        font-size: 1.5rem;
    }
}