ウェブ - いくつかのデバイスでArialフォントが異なって表示される

Question

私のウェブサイトでは、何らかの理由でArialフォントがいくつかのデバイスで異なって表示されています。

約1カ月前に苦情が届き始め、根本的な原因はローカル（ブラウザまたはOS）のどこかにあると思われます。 すべての問題のあるユーザーは、異なるバージョンのWindowsに座っていて、ほとんどがChromeを使用しています（ただし誰もいない）。

この問題を調査しようとしましたが、共通点が見つかりませんでした。

誰も既にこのような問題に直面していますか？

コード：

<h1 style="font-family: Arial;">Title</h1> 

Answer 1

私はあなたのウェブサイトのディレクトリとディレクトリから設定されたパスにあなたのフォントファイルを置くことをお勧めします。 （いくつかの倍多分そのデバイスは、あなたのフォントを持っていません。）あなたのCSSファイルの先頭で

：

@font-face { 
    font-family: "BYekan"; 
    src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype"); 
} 

はそれを使用する：

body{ 
    font-family: "BYekan"; 
} 

Answer 2

はい、この理由があります。何らかのデバイスやブラウザがフォントのレンダリングのために与えられた標準に従わなければならないと述べることは何もありません。したがって、テキストがブラウザ/デバイス間で矛盾してレンダリングされるという前提で、全体的なWebサイトデザインを作成することは賢明です。レンダリングされたテキストが「このスペースに収まる」と仮定するとすぐに、あなたは困っています。

代わりに、フォントレンダリングの問題を優雅に扱うデザインを作成します。

Answer 3

これは驚くべきことではなく、実際には「根本的な問題」と呼ばれるものは問題ではなく、単にブラウザでどのようにフォントが機能するかということです。

明示的な@font-faceルールと実際のフォントソースがないと、ロードされたフォントがおおよそお探しのものと一致している限り、どのようなフォントが読み込まれているか気にしないことをブラウザに伝えます。 「Arial」を要求すると、ブラウザはOSにArialファミリにあると主張するフォントを要求し、別のデバイスには異なるバージョンのArialがインストールされています（）。そのため、コンテンツはデバイスごとに異なるように見えます。

しかし、多くの人々が忘れていることは、そうであれば問題ではありません。重要なことは、サイトのコンテンツが一貫しているように見えることです。人々は、同時に2台のコンピュータであなたのサイトを見て、ピクセルが同じではないことに気づくことはありません。個々のユーザーは、一度に1つのデバイスでコンテンツを見るつもりです。だから：は一台のデバイスで一貫していると思われます？偉大な、あなたは完了です。 Arialのどのバージョンが実際に使用されているかは、そのケースではほとんど無関係です。