Arialが利用可能であっても、ブラウザはsans-serifを使用しています

Question

私はWordpressのWebサイトで作業していますが、コンソールからはメニュー内のテキストのフォントファミリがfont-family: Arial, Helvetica, sans-serif;であることがわかります。

ただし、Arialではなくsans-serifでテキストをレンダリングしています。つまり、フォントArialは私のブラウザでは利用できませんが、コンソールでCSSを正しく調整してfont-familyをfont-family: Arialに変更すると、Arialのテキストが表示されます。私はそれを比較しているのでArialだと確信していますイメージの横には、Arialテキストが含まれているPhotoshopを使用しました。

なぜ私のブラウザはArialをレンダリングしないのですか？最初のオプションではなく、代わりにsans-serifをレンダリングしますか？

html { 
 
    font-family: 'Arial'; 
 
} 
 
.other{ 
 
    font-family: 'Arial, Helvetica, sans-serif'; 
 
}

This text should be Arial. 
 
    <b> Home Services Careers Feedback Privacy Policy Referral </b> 
 
    <br> 
 
    <span class="other">This text can be Arial sans-serif or Helvatica </span> 
 
    <b class="other"> Home Services Careers Feedback Privacy Policy Referral </b>

Answer 1

それはあなたが単一引用符内のすべてのものを追加しているので、あります。ブラウザは'Arial, Helvetica, sans-serif'を検索しようとしますが、そのような名前のフォントは存在しません。したがって、既定値に戻します。通常は"Times New Roman", "Times", serifです。先に指定した内容は無視されます。

正しい定義は次のようになります。フォント名は引用符であることを

.other{ 
    font-family: "Arial", "Helvetica", sans-serif; 
} 

注意、各。フォントタイプは引用符で指定する必要はなく、リストの最後になければなりません。

ブラウザは、指定した順序でフォントを探し、最初に見つかったものを適用します。特定のフォントが見つからず、フォントタイプが指定されている場合、ブラウザは訪問者のシステムから1つを選択します。