8

Windows 8 上的 Chrome 26.0.1410.64m 在呈现 WebFonts 时出现问题。这是一个已知问题，解决方案是首先提供字体的 svg 版本而不是 woff 版本。它修复了抗锯齿并使字体看起来再次漂亮。

这种方法的缺点是在选择输入内的元素内部呈现出奇怪的效果。

我添加了一个 jsfiddle 来查看它的实际效果：http: //jsfiddle.net/4mSpv/6/。

CSS 尽可能简单。

@font-face {
    font-family: 'Montserrat';
    src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
select {
    font-family: 'Montserrat', sans-serif;
}

我删除了本地安装的字体，并注意到另一台 Windows 7 计算机也在这样做。有谁知道chrome是怎么回事？（IE、Firefox、Safari 都可以正常渲染）

选择输入渲染字体chrome

PS：JSFiddle中未包含其他浏览器字体以过滤问题，每个浏览器都有自己的怪癖（不允许字体大小等），但可以很好地呈现文本

4

3 回答 3

3

没有办法解决这个问题。

这不是回归问题，存在于 M24 中。

我提交了一个错误报告，它在选项菜单中出现了奇怪的字符渲染

于 2013-04-28T13:19:29.617 回答
2

正如 automaticoo 所说，这是 Chrome 的一个已知问题。但是，您可以使用本文所选答案中提到的技术解决此问题：Google Webfonts Render Choppy in Chrome on Windows。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    font-family: Arial; /* standard font */
  }
}

这样一来，您就可以为仍然有效的浏览器使用您想要的任何字体，并将其替换为适用于 Chrome 的通用 HTML 字体。

于 2014-04-12T00:45:34.390 回答
0

所以，我实际上是在寻找这个问题的答案，我偶然发现了这个问题。我注意到这个错误今天仍然存在（我刚遇到它，真是一个愉快的会议......）。现在我只找到了 1 个解决方案，即将 svg 字体放在 @font-face 声明的最后（这也意味着包括所有其他格式）。唯一的问题是，当您尝试修复字体渲染（以使其一切顺利）时，您实际上会将 svg 放在首位。这里有一些例子来证明它

1：SVG字体最后，没有清晰的字体，选项显示正确

@font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/OpenSans-Light-webfont.woff') format('woff'),
     url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
     url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal; }

示例 1

如您所见，选择框中的选项显示得很好，但字体确实不是那么糟糕，只需查看“注册”（与我的第二个示例相比，您可能会更好地注意到这一点）

2：SVG字体最后，字体清晰，选择中的愚蠢选项

@font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'),
     url('../font/OpenSans-Light-webfont.woff') format('woff'),
     url('../font/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; }

示例 2

现在您会看到字体更加清晰，但选择非常愚蠢。

我建议为选择添加另一个带有 svg 的字体。这将使您的字体在整个网站上保持清晰，但可以很好地显示选项。

于 2014-08-01T05:49:22.973 回答