0

編集：

Chrome は、@font-face を介して使用するフォントを何らかの形で正しくレンダリングしていません。検査対象の要素のフォント ファミリーを arial に変更したときに見つけたものです。これが考えられる理由は、クロムがフォントをピクセル化するのではなくより滑らかに表示する方法の修正を探していたときに、フォント形式の順序を入れ替えて svg を上に置くことができることを発見したためです。それを完全にレンダリングするためのクロム。ここに見られるように。

したがって、順序が間違っているか、単にフォントが何らかの形で壊れています。

問題は、サイトを壊さずにフォントをスムーズに保つために、このフォントをどのように使用するかです。

これが私が使用する@font-faceコードです：

@font-face {
    font-family: 'alegreya_scregular';
    src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
    src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
         url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
         url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'droid_sansregular';
    src: url('../includes/fonts/droidsans-webfont.eot');
    src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
         url('../includes/fonts/droidsans-webfont.woff') format('woff'),
         url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'droid_sansbold';
    src: url('../includes/fonts/droidsans-bold-webfont.eot');
    src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
         url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
         url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

クロムでレンダリングの問題がいくつかあります。何らかの理由で、リンクの右側が切り取られるため、下線はテキストの半分しか埋められず、右側の div は単語を新しい行に分割しません。それはたまにしか発生せず、ページを数回更新すると（回数が異なります）、最終的には修正されます。画像は以下です。

注: サイトはデンマーク語です。

画像、赤で下線が引かれた問題:

http://i.stack.imgur.com/zJHXD.jpg

これは何が原因で、どうすれば修正できますか?

注: これはナビゲーション リンク用です。

HTML:

<ul class="nav">
    <li class="first"></li>
    <li><a href="forside.html">Forside</a></li>
    <li><a href="booking.html">Booking</a></li>
    <li><a href="galleri.html">Galleri</a></li>
    <li><a href="begivenheder.html">Begivenheder</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="politik.html">Politik</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
</ul>

CSS:

.header .nav {
    position: absolute;
    overflow: hidden;
    font-size: .70em;
    bottom: -8px;
    right: 16px;
}
.header .nav li {
    float: left;
    background: #171717 url(../images/site/nav_divider.png) repeat-y right;
    text-transform: uppercase;
} .header .nav li:hover {
    background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}

.header .nav .first {
    width:2px;
    height:31px;
    margin-bottom:-0.95em;
}

.header .nav li a {
    display: block;
    padding: .75em .85em .75em .75em;
    color: #e0e0e0;
    text-decoration: none;
}
4

1 に答える 1

0

@font-face と chrome の動作を少し検索した後、問題の解決策を見つけました。どうやら svg を一番上に移動すると、レンダリングされたフォントがレイアウトを壊すようになるため、代わりに元のフォーマットを維持し、特別なメディア クエリを追加する必要があります。これにより、レイアウトを壊さずにクロムでフォントがスムーズにレンダリングされます。

例：

@font-face {
    font-family: 'droid_sansregular';
    src: url('../includes/fonts/droidsans-webfont.eot');
    src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../includes/fonts/droidsans-webfont.woff') format('woff'),
         url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
         url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'droid_sansregular';
        src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}
于 2013-01-15T22:47:51.323 に答える