box-shadow影響字體的重量

我有一個固定的導航條，我給出了陰影效果。這工作正常，但它似乎也影響所有的文字裏面，並使字體重量顯得更苗條。box-shadow影響字體的重量

如何讓它停止更改字體？

HTML

<nav id="nav1" class="dropshadow">Hello World</nav> 
<button>toggle drop shadow</button>

CSS

#nav1 { 
    position:fixed; 
    width:100%; 
    font-size:20px; 
    top: 0; 
    left: 0; 
    min-height:20px; 
    background:white; 
} 
button { 
    margin-top:50px; 
} 
.dropshadow { 
    -moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); 
    -moz-transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
}

來源

2014-05-17 Dex

我在任何瀏覽器中看不到任何字體重量的差異。 – BoltClock

@BoltClock嗯，當我切換時，我在OS X上看到Safari中的問題。在我的實際代碼中，我也看到了Chrome中的問題。 – Dex

這種差異似乎只出現在OSX上的Safari（因此我刪除了我的答案）。我認爲這可能是一個Safari錯誤。 – thexacre

我已經找到了答案，它涉及在操作系統層面的一些問題。

我在這裏更新瞭解決方案：http://jsfiddle.net/dvY4A/5/

時採取了增加財產-webkit-font-smoothing: antialiased;到#nav1塊。

關於它的更多細節可以在這裏找到：http://lists.w3.org/Archives/Public/www-style/2012Oct/0014.html

但基本上，對於文本，灰度和亞像素抗鋸齒兩個呈現模式。由於技術原因，瀏覽器會在硬件加速等特定操作期間嘗試在兩者之間進行切換，這是盒影必須使用的操作。

我仍然在使用我的解決方法，以防萬一，但我可能會在某個時刻設置此屬性。

來源

2014-05-19 09:31:21 Dex

box-shadow影響字體的重量

回答

相關問題