刚刚更新到最新的Chrome35稳定版,并注意到字体更平滑-很好,他们已经实现了DirectWrite。可爱的东西。
然而,在我的网站上,它似乎打破了。
主菜单的标记如下(非常简单):
<ul class="menu">
<li class="home">
<a class="current" href="/">Home</a>
</li>
<li class="who-we-are">
<a class="normal" href="/who-we-are/">Who we are <span>About the firm</span></a>
</li>
<li class="services-industries">
<a class="normal" href="/services-industries/">Services & Industries<span>How can we help you?</span></a>
</li>
<li class="our-people">
<a class="normal" href="/our-people/">Our People <span>Partner Profiles</span></a>
</li>
<li class="get-in-touch">
<a class="normal" href="/get-in-touch/">Get in touch with us<span>Let's do business</span></a>
</li>
</ul>
每个
a
都像这样填充:padding: 16px 17px;
它们也显示为其父
li
中的块。每个
a > span
的样式如下:display: block;
font-size: 12px;
font-weight: 800;
margin-top: 3px;
text-transform: lowercase;
新的DirectWrite使菜单显示如下:
当它应该像这样出现时:
额外的电话是从哪里来的?有什么解决办法吗?我试过在
margin-right
中添加一个span
来查看文本是否会流回第一行,但是没有这样的运气。以下是
a
和span
的完整LESS:a {
border-right: 1px solid #fff;
padding: 16px 17px;
color: @colorSecondary;
display: block;
font-size: 17px;
line-height: 1em;
min-width: 10px;
.transition(.4s background-color ease-out);
span {
color: @colorMediumText;
display: block;
font-size: 12px;
font-weight: 800;
margin-top: 3px;
text-transform: lowercase;
}
编辑:
你知道,我在用
@font-face
。我用的字体是Lato。关闭并默认为Arial或Helvetica并不能解决问题。 最佳答案
结果再次证明,这是我对text-rendering: optimizeLegibility
的使用。
那个特殊的特征一直是我生存的祸根。在一些网站上确实需要,但现在我不能使用它,直到问题得到解决。
关于html - Chrome 35 DirectWrite(默认情况下处于启用状态)中断了我的网站菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23842637/