Web でよく使われるフォントの紹介 (iOS および Android ブラウザでサポートされているフォント)

年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そこで、iOS および Android デバイス上のさまざまなブラウザでサポートされているフォントを調査するというタスクが与えられました。「研究」という言葉を聞くと頭が痛くなりました。私は単なる小さなプログラマーであり、製品開発者ではないので、そのような仕事をしたことはありません。まあ、あなたが理解した通りに受け取ってください。

私はフロントエンドで作業していますが、実のところ最も基本的なフォントの種類さえ知りません。一日研究した後、私の知識が大幅に広がったことに気づきました。どの有名人がこう言っていたか忘れましたが、「どんなに小さなことでも、10年間続ければその道の専門家になれる」では、早速、Web フォントについて私が知っている情報を皆さんと共有したいと思います。

1. Web コーディングでは、CSS によってデフォルトで使用される Web フォントは制限されていますが、新しいバージョンの CSS3 では、新しく追加された @font-face 属性を通じて、ブラウザーに読み込まれる特別なフォントを導入できます。

Web ページのテキストコンテンツがブラウザーに表示されると、テキストフォントは、デザイナーが CSS で定義したフォントファミリの順序で表示されます。フォントファミリーとは何ですか?フォントファミリは、次のコード行のように、CSS コードの「font-family」コード内に表示されるフォント名の種類です。

コードをコピー

コードは次のとおりです。

フォントファミリー:"Comic Sans MS","Youyuan","Heiti",サンセリフ;

W3C 標準によると、コード行を解析する際、ブラウザはまずシステム内の Comic Sans MS フォントを検索します。このフォントがシステム内に存在する場合、ブラウザは Comic Sans MS フォントを使用します。存在しない場合は、次に Thin Round フォントを検索し、ブラウザがシステム内に存在するフォントを表現できるようになるまでこれを繰り返します。

なお、「sans-serif」は特定のフォントの名前ではなく、上記で説明したフォントが無効な場合に最終的に選択されるフォントです。ブラウザユニバーサルフォントと呼ばれます。使用しているブラウザのデフォルトのユニバーサルフォントによって異なります。「Arial」または「Helvetica」の場合があります。

2. Web ページでよく使用されるフォントは、通常、セリフ、サンセリフ、モノスペース、ファンタジー、キューシブの 5 つのカテゴリに分類されます。これらの共通名により、ユーザーエージェントは対応するコレクションからフォントを選択できます。
セリフフォントには、文字のストロークの端にセリフと呼ばれる小さなディテールがあります。これらのディテールは、大文字で特に目立ちます。
サンセリフフォントは文字の端に細かい装飾がなく、セリフフォントよりも形状がシンプルです。
各文字の幅が等しい等幅フォント。コンピュータ関連の書籍のコードブロックの組版によく使用されます。
ファンタジーフォントとキューシブフォントはブラウザーではあまり使用されず、ブラウザー間で明らかな違いがあります。

3. ウェブページでよく使われるフォント

サンセリフ:

Helvetica: デザイナーのお気に入りのフォントとして投票され、リアリズムスタイルとシンプルでモダンなラインを持ち、非常に人気があります。これは Mac では最高の Web フォントと考えられていますが、ヒント機能により Windows では表示が悪くなります。
Arial: Helvetica の「クローン」。Helvetica に非常に似ていますが、R や G などの詳細がわずかに異なります。フォントサイズが小さすぎたり、文字数が多すぎたりすると、目が疲れてしまいます。 WinとMacの表示は正常です
Lucida ファミリー: Lucida Grande は、Mac OS UI の標準フォントです。ヒューマニストスタイルで、少し生き生きとしたフォントです。 Mac での表示は Win での表示よりも優れています。
Verdana: ヒューマニストスタイルの、画面表示専用に設計されたフォントです。小さいサイズでも鮮明に表示できますが、フォントの詳細が著しく失われるため、タイトルには使用しないことをお勧めします。
Tahoma: 同じくヒューマニストスタイルのフォントで、Verdana に少し似ていますが、わずかに幅が狭く、カウンターもわずかに小さくなっています。かつては Windows の標準フォントでしたが、Mac 10.5 以降ではデフォルトでインストールされています。
Trebuchet MS: Microsoft 用に設計されたヒューマニストスタイルのフォントです。個人的には、その個性が目立ちすぎていて、適切に使用しないと馴染まないと思います。

セリフ：

Georgia: 基本的に、本文表示に適したセリフフォントは Georgia です。ストロークは太く、セリフは明るく、アウトラインは大きく、小さなフォントは明瞭で、細部まで問題ありません。
Times: Times は新聞向けにデザインされています。限られたスペースに多くのテキストを詰め込めるのが特徴。線が弱く、画面上のフォントサイズが小さいため目が疲れます。 Engadget がリニューアルされた際、本文には Times が使用されていましたが、厳しい批判を受けて Georgia に変更されました。

中国語:

Songti: Windows で最も一般的なフォントです。小さいフォントはドットマトリックス、大きいフォントは TrueType です。ただし、大きいフォントは見栄えがよくないので、タイトルには使用しない方がよいでしょう。
Microsoft YaHei: Vista 以降に導入された新しいフォント。Cleartype をオンにすると表示効果は良好ですが、Cleartype なしではぼやけて見えます。
Chinese Xihei: Mac のデフォルトの中国語。

4. 小さなデモを作成し、さまざまなブラウザでテストしました。このフォントの解析には、ブラウザによってまだ違いがあります。

コードをコピー

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>フォント</title>
<meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"/>
<meta name="author" content="@my_programmer">
<スタイルタイプ="text/css">
/*リセット{*/
*{ パディング:0; マージン:0;} 画像{ 境界線:0;} li{ リストスタイル: なし;}
/*} リセット */
div{フォントサイズ:1.2em;}
</スタイル>
</head>
<本文>
<br/>
--Webフォントは一般的に5つのカテゴリに分けられます--
<div style="font-family: sans-serif;">Hello hello world    sans-serif (サンセリフ) </div>
<div style="font-family: serif;">Hello hello world    serif (serif) </div>
<div style="font-family: monospace;">Hello hello world    monospace (monospace) </div>
<div style="font-family: fantasy;">Hello world      fantasy(ファンタジー) </div>
<div style="font-family: cuisive;">Hello hello world    cuisive (筆記体) </div>
<br/>
--サンセリフ--
<div style="font-family: Helvetica, sans-serif;">Hello hello world    Helvetica </div>
<div style="font-family: Arial, sans-serif;">Hello hello world    Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">Hello hello world    Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">こんにちは、こんにちは世界    Verdana </div>
<div style="font-family: Tahoma, sans-serif;">こんにちは、こんにちは世界    Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">こんにちは、こんにちは世界    Trebuchet MS </div>
<br/>
-- セリフクラス --
<div style="font-family: Georgia, serif;">こんにちは、こんにちは世界    Georgia </div>
<div style="font-family: Times, serif;">Hello hello world    Times </div>
<br/>
--中国語フォント--
<div style="font-family: 宋体">Hello hello world    宋体</div>
<div style="font-family: Microsoft YaHei">Hello world    Microsoft YaHei</div>
<div style="font-family: Chinese Thin Black">Hello hello world    Chinese Thin Black</div>
<div style="font-family: 黒体">Hello hello world    黒体</div>
</本文>
</html>

Chromeに表示される結果

IE8で表示された結果

Firefoxに表示される結果

5. このテストでは、次のことがわかりました。

Android デバイスのブラウザはあまり強力ではありません (iOS はまだテストしていないので、それほど優れているとは思いません)。Android フォンのブラウザでサポートされている一般的なフォントは 3 つだけです。

sans-serif (サンセリフ) クラス: Arial; //sans-serif クラスに設定されていれば、どのフォントでも同じに見えます。
serif class: Georgia; //serif クラスに設定されていれば、どのフォントでも同じに見えます。
monospace (等幅) クラス // monospace クラスに設定されていれば、どのフォントでも同じに見えます。

モバイルデバイス上のブラウザにはまだ改善の余地があります。

<<: JavaScript ES 新機能ブロックスコープ

>>: CSS における @ の使用法の概要 (例と説明付き)