Özel simge yazı tipiyle doldurma sorunları (?). Aşağıdaki örnek

Question

Özel .svg simgelerini kullanarak bir simge yazı tipi oluşturdum ve dolguda bir sorun yaşıyorum (veya başka bir şey). Sorunun ortaya çıkması durumunda, herhangi bir dolgu içermediğim simgeler. Nedense

, simgeler olması gerekenden ve geri aşağı kabın içine almak için herhangi bir yol bulamıyorum nerede yukarıda kaymış gibi görünüyor. Benim sorun vurgulamak için sarı "background-color" belirledik http://i.imgur.com/RwOKWLp.png

: İşte neden bahsettiğimi bir örnektir.

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

: Font-face kodu @

[data-icon]:before { 
    font-family: 'iconfont'; 
    content: attr(data-icon); 
    speak: none; 
    font-size: 100%; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

.vicon { 
    display: inline-block; 
    font-size: 50px; 
    margin-top: 1em; 
    background-color: yellow; 
} 

: Burada

<div class="vicon" aria-hidden="true" data-icon="&#xe001;"></div> 

Şu anda ile çalışıyorum CSS: İşte

bir simge için HTML Bunun neden olabileceği hakkında bir fikri olan var mı?

Answer 1

sorun CSS değil ama yazı tipi bazal yüksekliği (http://icomoon.io/#docs/font-metrics bakınız)

Bu yazı tipi ölçülerine yanlış olduğu anlamına gelir. Onları değiştirip değiştirmediğinizi veya Icomoon'dan bir hata olup olmadığını bilmiyorum ama şu anda doğru bir yazı tipi dışa aktaramadım.

Neyse sen (ya da en azından olmamalı) CSS ile bu "doğru" olamaz. En iyi yol yazı tipini değiştirmektir.