Question

我有一个固定的导航栏，我给出了投影效果。这样做很好，但它似乎也影响了里面的所有文本，并使字体重量看起来更苗条。

如何让它停止更改字体？

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;
}

Answer 1

我找到了答案，它涉及操作系统级别的一些问题。

我在这里更新了解决方案：http://jsfiddle.net/dvY4A/5/

只需将属性-webkit-font-smoothing: antialiased;添加到#nav1块。

有关它的更多详细信息，请访问：http://lists.w3.org/Archives/Public/www-style/2012Oct/0014.html

但基本上，有两种渲染模式用于文本，灰度和亚像素抗锯齿。由于技术原因，浏览器尝试在硬件加速等特定操作期间切换两者，盒式阴影必须使用硬件加速。

我仍在使用我的解决方法以防万一，但我可能会在某个时候设置此属性。

box-shadow影响字体粗细

1 个答案: