Chrome SVG webfonts 选择输入中的奇怪字符答案

【问题标题】：Chrome SVG webfonts weird characters in select inputChrome SVG webfonts 选择输入中的奇怪字符
【发布时间】：2013-04-09 08:14:30
【问题描述】：

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 都可以正常渲染）

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

【问题讨论】：

能否在此处分享错误报告的链接？
我刚刚创建了一个，因为我在更多带有 chrome 的设备上进行了测试，并且可以验证问题。 code.google.com/p/chromium/issues/…
顺便说一句，不只是 Win8，OSX Chrome 也有同样的问题。

标签： html css google-chrome rendering webfonts

【解决方案1】：

没有办法解决这个问题。

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

我提交了一个错误报告，它Weird character rendering in option menu

【讨论】：

考虑到他们通常优先考虑字体渲染问题，我们不太可能很快看到这个问题得到解决。对于它的价值，我在错误报告上加了星标以赋予它更多的权重。在那之前，我会为我的选择框使用通用字体
是的，我在选择框中也切换回了普通字体。这有点烦人，而且很容易重现。我同意他们已经有很多字体渲染错误，这对他们来说可能是一个边缘案例

【解决方案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 字体。

【讨论】：

【解决方案3】：

所以，我实际上是在寻找这个问题的答案，我偶然发现了这个问题。我注意到这个错误今天仍然存在（我刚遇到它，真是一个愉快的会议......）。现在我只找到了 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; }

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

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; }

现在你会看到字体更清晰，但选择真的很愚蠢。

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

【讨论】：