Chrome SVG webfonts weird characters in select inp

问题:

Chrome 26.0.1410.64m on Windows 8 has problems rendering WebFonts. It is a known problem and a solution is to first serve the svg version of the font instead of the woff version. It fixes the anti-aliasing and makes font look pretty again.

The downside of this method is the weird rendering inside the element inside select inputs.

I added a jsfiddle to see it in action : http://jsfiddle.net/4mSpv/6/.

The CSS is as simple as it can be.

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

I remove the local installation of a font and noticed an other windows 7 computer doing the same. Anyone knows what is going on with chrome? (IE, Firefox, Safari all render fine)

PS: Other browser fonts not included in JSFiddle to filter out the problem and each browser have their own quirks (not allowing font-size etc) but render the text fine

回答1:

There is no way to solve this problem.

This is NOT a Regression issue and is existing from M24.

I submitted a bug report and it Weird character rendering in option menu

回答2:

As automaticoo stated, it is a known issue with Chrome. However, you can workaround the issue with a technique mentioned in the selected answer for this post: Google Webfonts Render Choppy in Chrome on Windows.

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

That way you can use whatever font you want for browsers that still work, and replace it with a generic HTML font for Chrome.

回答3:

So, I was actually looking for an answer for this, and I stumbled upon this question. I noticed this bug still exists today ( I just met it, such a happy meeting... ). Now I only found 1 solution, which is placing the svg font last in the @font-face declaration (this also means including all other formats). The only problem is that, when you for exampling try fixing the font rendering (to make it all smooth and stuff) you'd actually put the svg first. Here are some examples to demonstrate it

1: SVG font last, no crisp font, options are displayed right

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

So as you can see, the options in the select box show just fine, but the font really isn't that crips, just look at "Register" (you might notice this better in comparison with my second example)

2: SVG font last, crisp font, stupid options in select

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

Now you will see that the font is a lot more crisp but the select is really stupid.

I suggest adding another font-face with the svg last just for select's. This will keep your fonts crisp throughout the website but display the options just fine.