刚刚更新到最新的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 &amp; 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来查看文本是否会流回第一行,但是没有这样的运气。
以下是aspan的完整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/

10-10 09:34