0

これに関する多くの投稿を見てきましたが、Windows Chrome でのみ不適切にレンダリングされると書かれています。私の場合、IEを含むほとんどのブラウザです。Cleartype はデフォルトでオンになっているため、問題はありませんでした。

Windows が Google Fonts を適切に処理できないとは信じられません。おそらく、誰かが実行可能な解決策または合理的なフォールバックを持っているかもしれません.

Windows マシンに Arial を使用するのは賢明ですか? OS の種類を検出するスクリプトはありますか? もしそうなら、それを実装する必要がありますか? 基本的なフォントを選択する必要があることはわかっていますが、OSX の群衆を喜ばせることはできますか?

編集：

News Cycle を使用していることを付け加えておきます。18px 以下では、Google Fonts の Web サイトでも見栄えが悪くなります。

4

3 に答える 3

2

ギザギザのレンダリングの問題についてはわかりませんが、フォールバックのためにnavigator.userAgent、JavaScript のプロパティを使用して OS を検出できます。

Windows ユーザー エージェントには部分文字列が含まれます。NT x.yたとえばNT 6.1、Windows 7 用です。

編集：プロパティを使用することもできnavigator.appVersionます。サンプルは次のとおりです。

if(navigator.appVersion.indexOf("Win") != -1)
    OS = "Windows";
if(navigator.appVersion.indexOf("Mac") != -1)
    OS = "MacOS";
if(navigator.appVersion.indexOf("X11") != -1)
    OS = "Unix";
if(navigator.appVersion.indexOf("Linux") != -1)
    OS = "Linux";

if(OS == "Windows") {
    //add specific styles
}

プロセスを自動化するには、OS に応じて要素にクラスを追加するCSS User Agentを使用できます。

于 2012-09-04T20:05:44.480 に答える
1

Windows上のChromeでのみ問題が発生しました。これまでの回避策は、目に見えないテキスト シャドウを追加するか、テキストを少しだけ回転させることでしたが、バージョン 16 あたりから機能しなくなりました。次の CSS プロパティが一部のフォントで役立つ場合があることがわかりました。

-webkit-text-stroke-width: .5px;
于 2012-09-04T20:28:18.707 に答える
1

フォントを賢く選択し、常にテストしてください。Google フォントは素晴らしいリソースですが、すべてのフォントがすべてのブラウザー/プラットフォームで正しく表示されるわけではなく、判読できるわけでもありません。

編集: Google にはフォントに関するリソースがたくさんあります。「フォント スタック」を調査する必要があります。これにより、代替フォントの選択に光が当てられます。私見ですが、この場合、ユーザーエージェントのスニッフィングは必要ないと思います...

少し古いですが、かなり良い記事があります: http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

于 2012-09-04T20:11:51.347 に答える