Question

修改

Chrome以某种方式通过@ font-face错误地渲染我使用的字体。我发现，因为我将被检查元素的字体系列更改为arial。这可能是因为我正在寻找一个关于chrome如何渲染字体以使它们看起来更平滑而不是像素化的修复，我发现你可以交换字体格式的顺序并将svg放在顶部，这会导致镀铬使其完美呈现。见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; } }

Chrome无法完全呈现css

1 个答案: