使用圖標字體（字體真棒）看起來有點模糊，太大膽

我使用字體真棒在我的網站上創建圖標，雖然他們看起來美妙的iPod觸摸與視網膜顯示，在我的iMac他們看起來有點模糊和較少定義。使用圖標字體（字體真棒）看起來有點模糊，太大膽

這裏有一個形象展示：

enter image description here

正如你所看到的，字體看起來真的很好，crispt對Retina顯示屏的iPod Touch，但在iMac上，它是一種蹩腳。

這是什麼造成的？這是否與反走樣？我能做些什麼嗎？

來源

2012-09-28 shrewdbeans

這樣的問題可能與反鋸齒或提示有關。如果字體希望在較小的尺寸上看起來不錯，字體需要在某種網格上對齊。 GitHub的人寫了一個很好的blog post他們如何管理自定義字體的清潔。

我會嘗試在網格上對齊它，並遵循GitHub人的腳步。他們在圖標上做得很好。

另外：iPod Touch和iMac之間的圖標大小不同，還是不同DPI設置的副作用？這也可能是字體渲染的一個問題。

如果可能，請嘗試使用DPI設置。我不使用Mac電腦，所以我不知道如何改變這些設置。儘管如此，它仍然不能解決底層電網問題。你能夠編輯有問題的字體嗎？

來源

2012-09-30 20:01:01

我認爲這是DPI設置的副作用，因爲它們都是相同的字體大小。你對此有何看法？ – shrewdbeans

我有一位設計師正在處理字體，所以我已經將GitHub文章轉發給他。我希望我們可以模仿這種技術。 – shrewdbeans

Github最近轉移到SVG圖標，並發表了另一篇關於它的好博客文章。 https://github.com/blog/2112-delivering-octicons-with-svg –

添加到@ sporkbox的答案，如果你特別在意的Webkit瀏覽器，有以下CSS選項，你可以選擇使用：

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

來源

2012-09-30 20:04:35

我發現，一些瀏覽器試圖模仿一個大膽字體，當沒有大膽的重量時，通過加粗線條，導致類似於你所描述的情況。你確定這個地方出現在你有font-weight: normal;的地方嗎？

來源

2012-10-23 14:25:33 gterez

使用CSS字體平滑：

-webkit-font-smoothing: antialiased;

來源

2013-12-30 13:54:05 Kinglybird

-webkit視角：1000;

固定它，我

來源

2014-09-19 14:50:30

還有的作品有時一個奇怪的招，嘗試：

-webkit-transform:rotateZ(0); 
-moz-transform:rotateZ(0); 
-o-transform:rotateZ(0); 
transform:rotateZ(0);

，如果你有一箇中心塊，嘗試檢查如果離開偏移是一個整數。你可以使用Javascript來檢查和修復它。如果你願意，我可以幫你。

來源

2015-06-17 09:40:54

我已經實現了變換（-50％）的中心化，這就是模糊圖標的原因。替換爲保證金：自動 - 現在圖標很清晰。謝謝。 – psx

最佳的跨瀏覽器的解決方案是：

.your_font_class{ 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
}

來源

2015-10-29 15:12:15 Marconi

一些之前還挺提到的解決方案/八九不離十做的伎倆，但什麼固定它，我被刪除（註釋掉）的「FA的字體大小繼承「class-font-awesome.css（和font-awesome.min。CSS）：

font-size: inherit;

類的最終結果是這樣的：

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    /* font-size: inherit; */ 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

除了這個，我不得不因爲，他們要通過註釋掉推跌過頭來調整大圖標這條線從「FA-LG」類：

vertical-align:-15%

類看起來像這樣

.fa-lg { 
    font-size: 1.33333333em; 
    line-height: 0.75em; 
    /* vertical-align: -15%; */ 
}

我使用字體真棒4.7.0

來源

2018-02-26 22:50:33 phoenix

使用圖標字體（字體真棒）看起來有點模糊，太大膽

回答

相關問題