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; それらは、親内のブロックとしても表示されますli。

それぞれa > spanのスタイルは次のようになります。

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

新しい DirectWrite により、メニューは次のように表示されます。

DirectWrite を使用

次のように表示される場合：

DirectWrite なし

余分な行はどこから来たのですか？回避策はありますか？テキストが最初の行に戻るかどうかを確認するためにamargin-rightを追加しようとしましたが、そのような運はありません。span

との完全な LESS は次aの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

これを追加する必要があります

a{
white-space:nowrap;
}
于 2014-05-24T12:17:13.033 に答える
1

繰り返しますが、それは私の使用でしtext-rendering: optimizeLegibilityた。

その特定の機能は、私の存在の悩みの種でした。一部のサイトでは本当に必要ですが、問題が修正されるまでまったく使用できません。

于 2014-05-24T08:28:49.057 に答える