圖標字體不適合像素（有時）

我構建了適合像素的圖標字體，但是當我嘗試使用它時，有時適合像素，其他時間不適合。圖標字體不適合像素（有時）

在此示例中，圖標的三個實例顯示不同的行爲。一審合格，其次三分之一不合格。爲什麼？

這個例子可以看這裏： http://iac.e451.net/biblioteca-de-documentos.html

HTML

<div class="adjuntos"> 
    <a href="#"> 
     <span class="icon-doc-24"></span> 
    </a> 
    <a href="#"> 
     <span class="icon-doc-24"></span> 
    </a> 
    <a href="#"> 
     <span class="icon-doc-24"></span> 
    </a> 
</div>

CSS

.docs .doc .adjuntos { 
    padding: 15px 50px; 
    background-color: #555555; 
} 
.docs .doc .adjuntos a { 
    display: inline-block; 
    color: white; 
    font-size: 24px; 
    line-height: 24px; 
} 
.docs .doc .adjuntos a:hover { 
    color: #b0adda; 
}

來源

2015-11-17 aitor

這是因爲字體平滑的。嘗試添加：

-webkit-font-smoothing: auto; 
font-smooth: auto;

到您的.adjuntos span。它會解決你的問題（在Chrome和Firefox上），但會改變圖標的渲染。

來源

2015-11-17 16:47:17

在此課程中添加我的代碼並刪除'font-feature-settings：「liga」; -moz-osx-font-smoothing：grayscale; ' –

我遇到了添加字體平滑屬性的麻煩。我正在開發一個無引導程序的環境，並且在運行Grunt less任務後，這些屬性在CSS文件中消失。無論如何，我在Firefox的開發工具中做到了這一點。當我禁用moz字體平滑，沒有圖標符合像素。當我把webkit和簡單的字體平滑：自動，沒有改變。此屬性顯示爲刪除線（未呈現）。 https://www.dropbox.com/s/jncwfzala9jrq4q/Captura%20de%20pantalla%202015-11-17%2018.13.43.png?dl=0 – aitor

在研究了字體平滑選項（謝謝Raphaël尋求幫助）後，我通過幾個瀏覽器得出結論，問題出在字體構建過程中。這不是一個CSS問題。

我會試着研究這個構建過程。

來源

2015-11-18 08:04:24 aitor

不客氣！ –

圖標字體不適合像素（有時）

回答

相關問題