0

编辑：

Chrome 以某种方式错误地渲染了我通过 @font-face 使用的字体。当我将检查元素的字体系列更改为 arial 时，我发现了这一点。这可能是因为我正在寻找有关 chrome 如何呈现字体的修复程序，以使它们看起来更平滑而不是像素化，我发现您可以交换字体格式的顺序并将 svg 放在顶部，这会导致chrome 来完美渲染它。如此处所见。

所以要么是顺序把它们弄乱了，要么只是字体以某种方式被破坏了。

现在的问题是，我如何在不破坏网站并保持字体流畅的情况下使用这种字体？

这是我使用的@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;
}

我在 chrome 上遇到了一些渲染问题。由于某种原因，右侧的链接被截断，因此下划线只会填充一半的文本，而右侧的 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 移到顶部会使渲染的字体破坏布局，因此您应该保留原始格式并添加特殊的媒体查询，这将在不破坏布局的情况下在 chrome 中平滑地渲染字体。

例子：

@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 回答