2

刚刚更新到最新的 Chrome 35 Stable，并注意到字体更流畅 - 太好了，他们已经实现了 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; 它们也显示为其 parent 中的块li。

每个a > span的样式都是这样的：

display: block;
font-size: 12px;
font-weight: 800;
margin-top: 3px;
text-transform: lowercase;

新的 DirectWrite 使菜单如下所示：

使用 DirectWrite

当它应该像这样出现时：

没有 DirectWrite

多余的线是从哪里来的？有什么解决方法吗？我尝试在 中添加 amargin-right以span查看文本是否会流回第一行，但没有这样的运气。

以下是 thea和的完整 LESS span：

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 并不能解决问题。

4

2 回答 2

1

事实证明，这又是我使用的text-rendering: optimizeLegibility.

这个特殊的功能一直是我存在的祸根。在某些网站上确实需要，但现在我根本无法使用它，直到问题得到解决。

于 2014-05-24T08:28:49.057 回答
1

你应该添加这个

a{
white-space:nowrap;
}
于 2014-05-24T12:17:13.033 回答