8

Windows 8 上の Chrome 26.0.1410.64m では、WebFonts のレンダリングに問題があります。これは既知の問題であり、最初に woff バージョンではなく svg バージョンのフォントを提供することで解決できます。アンチエイリアスが修正され、フォントがきれいに見えます。

この方法の欠点は、select 入力内の要素内で奇妙なレンダリングが行われることです。

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 に含まれていない他のブラウザー フォントと、各ブラウザーには独自の癖 (font-size を許可しないなど) がありますが、テキストは適切にレンダリングされます。

4

3 に答える 3

0

それで、私は実際にこれに対する答えを探していました、そして私はこの質問に出くわしました. このバグがまだ存在していることに気付きました (出会ったばかりで、とても幸せな出会いでした...)。@font-face 宣言の最後に svg フォントを配置する解決策は 1 つしか見つかりませんでした (これは、他のすべての形式を含めることも意味します)。唯一の問題は、例としてフォントのレンダリングを修正しようとすると (すべてをスムーズにするために)、実際には 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 番目の例と比較すると、これがよくわかるかもしれません)。

2: SVG フォントの最後、くっきりしたフォント、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; }

例 2

これで、フォントがより鮮明になっていることがわかりますが、選択は本当にばかげています。

選択のためだけに、最後にsvgを使用して別のフォントフェイスを追加することをお勧めします。これにより、Web サイト全体でフォントが鮮明に保たれますが、オプションは問題なく表示されます。

于 2014-08-01T05:49:22.973 に答える