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 における @ の使用法の概要 (例と説明付き)

推薦する

SQL Server 2019 Always On クラスターの Docker デプロイメントの実装

目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...

MySQLデータベースの追加、削除、変更操作の詳細な説明

データの挿入テーブル名(列名1、列名2、列名3)の値(値1、値2、値3)に挿入します。ユーザーに(u...

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

Dockerでイメージを削除する方法

dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...

WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明

電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...

Linux に Python 3.8.1 をインストールするための詳細なチュートリアル

この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

nginx のスムーズな再起動を実装する方法

1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

Linux で PHP を 5.6 にアップグレードする実用的な方法

1: ターミナルに入ったらPHPのバージョンを確認する php -v出力は次のようになります。 PH...