Chrome SVG网页字体选择输入中的怪异字符 [英] Chrome SVG webfonts weird characters in select input

问题描述

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

这种方法的缺点是选择输入内元素内部的奇怪渲染。

我添加了一个jsfiddle来实现它：

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

解决方案

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

这篇关于Chrome SVG网页字体选择输入中的怪异字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！