css - Chrome 没有完全渲染 css

Question

编辑:

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

所以要么顺序打乱了它们，要么只是字体以某种方式损坏了。

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

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

Answer 1

在对@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;
    }
}