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

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 &nbsp;&nbsp; sans-serif (サンセリフ) </div>
<div style="font-family: serif;">Hello hello world &nbsp;&nbsp; serif (serif) </div>
<div style="font-family: monospace;">Hello hello world &nbsp;&nbsp; monospace (monospace) </div>
<div style="font-family: fantasy;">Hello world &nbsp;&nbsp;&nbsp;&nbsp; fantasy(ファンタジー) </div>
<div style="font-family: cuisive;">Hello hello world &nbsp;&nbsp; cuisive (筆記体) </div>
<br/>
--サンセリフ--
<div style="font-family: Helvetica, sans-serif;">Hello hello world &nbsp;&nbsp; Helvetica </div>
<div style="font-family: Arial, sans-serif;">Hello hello world &nbsp;&nbsp; Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">Hello hello world &nbsp;&nbsp; Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">こんにちは、こんにちは世界 &nbsp;&nbsp; Verdana </div>
<div style="font-family: Tahoma, sans-serif;">こんにちは、こんにちは世界 &nbsp;&nbsp; Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">こんにちは、こんにちは世界 &nbsp;&nbsp; Trebuchet MS </div>
<br/>
-- セリフクラス --
<div style="font-family: Georgia, serif;">こんにちは、こんにちは世界 &nbsp;&nbsp; Georgia </div>
<div style="font-family: Times, serif;">Hello hello world &nbsp;&nbsp; Times </div>
<br/>
--中国語フォント--
<div style="font-family: 宋体">Hello hello world &nbsp;&nbsp; 宋体</div>
<div style="font-family: Microsoft YaHei">Hello world &nbsp;&nbsp; Microsoft YaHei</div>
<div style="font-family: Chinese Thin Black">Hello hello world &nbsp;&nbsp; Chinese Thin Black</div>
<div style="font-family: 黒体">Hello hello world &nbsp;&nbsp; 黒体</div>
</本文>
</html>

Chromeに表示される結果

IE8で表示された結果

Firefoxに表示される結果

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

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

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

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

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

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

推薦する

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...

CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワーク カードの設定の詳細な説明

最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...

docker --privileged=true パラメータの役割についての簡単な説明

バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...

Flex レイアウトで適応型ページを作成する (構文と例)

Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...

CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明

CSS を記述するときに、デザインに存在する重要なケースを忘れてしまうことがあります。たとえば、コン...

CentOS8 jdk8 / java8 のインストールチュートリアル(推奨)

序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...

vue3 で vue-router を使用するための完全な手順

序文ルーティングの管理は、ほとんどのシングルページ アプリケーションにとって不可欠な機能です。 Vu...

Linux シェル環境での Zabbix API の使用

Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...

CSS の 4 つのインポート方法と優先順位の簡単な分析

第一に: CSSを導入する4つの方法CSS を導入する方法には、インライン スタイル、埋め込みスタイ...

MySQL の最初のインストールが成功した後にパスワードを初期化する手順

ファイルをディレクトリに解凍しますこれは解凍後のディレクトリですmy.iniファイルを入力しますダブ...

LinuxでRPMを使用してmysql5.7.17をインストールする

LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...