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

Question

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计算机也这样做。谁知道铬的情况如何？ （IE，Firefox，Safari都渲染得很好）

PS：JSFiddle中没有包含其他浏览器字体来过滤问题，每个浏览器都有自己的怪癖（不允许使用字体大小等），但渲染文字

Answer 1

没有办法解决这个问题。

  

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

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

Answer 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字体。

Answer 3

所以，我实际上是在寻找答案，我偶然发现了这个问题。我注意到这个bug今天仍然存在（我刚刚遇到它，这是一次愉快的会议......）。现在我只找到了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添加另一个font-face，仅用于select。这将使您的字体在整个网站中保持清晰，但显示选项就好了。