フォントについては常に誤解があります。私たちは常に font-family が特定のフォントであると考えていたかもしれませんが、実際には、フォント ファミリーを指します。たとえば、Times は実際には複数の変換を組み合わせたものです。 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique などが含まれます。
さまざまな特定のフォント ファミリに加えて、CSS では 5 つの一般的なフォント ファミリ
セリフ フォント Serif はセリフ フォントであり、単語の装飾のストロークの最初と最後に余分なフォントがあることを意味しますそしてストロークの太さも変わります。 CSS Authoritative Guide の説明では、フォントはプロポーショナルであり、その上下に短い線があるとされています。フォント内のすべての文字が、サイズの違いに応じて幅が異なる場合、フォントはプロポーショナルであると言われます。セリフ フォントは識別しやすいため、可読性が高くなります。中国語フォントの場合、本文に最適なセリフ フォントは宋代です。英語の場合、Times New Roman
サンセリフフォント サンセリフはサンセリフフォントです。一般に機械的で均一なセリフ フォントとは対照的に、同じ曲率、直線、鋭い角を持つ傾向があります。サンセリフ フォントは目を引きますが、テキストを読むときに読みにくくなります。中国語では太字、丸字、弥平などはサンセリフ体です。英語では、Arial と Tahoma が一般的に使用されるサンセリフ フォントです。
セリフ フォントとサンセリフ フォントを区別するための図
等幅フォント
筆記体フォント
Fantasy font
理論的には、ユーザーがインストールしたフォントは上記のシリーズのいずれかに属する必要がありますが、例外はあるかもしれませんが、そのような例外はそれほど多くありません。
フォントの種類を指定する ドキュメントでサンセリフ フォントを使用したいが、どのフォントが使用されるかは気にしない場合、コードは次のように記述できます
body{font-family:sans-serif;}この場合、ユーザー エージェントサンセリフ フォントを自分で選択し、body 要素に適用します。
フォント名を指定する 指定したフォントがある場合は、フォントを直接指定することができます。
body{font-family:microsoft yahei;}これにより、Microsoft Yahei が body 要素に適用されます。ユーザー エージェントが Microsoft Yahei フォントを見つけられない場合、ユーザー エージェントのデフォルト フォントを使用して表示することのみが可能で、それ以外の場合は何も行いません。
もちろん、フォントファミリーとフォント名の組み合わせも使用できます
body{font-family:microsoft yahei,sans-serif;}このように、Microsoft Yahei フォントが見つからない場合は、別のサンセリフ フォントが使用されます。
これを念頭に置いて、font-family を記述するときにユニバーサル フォント ファミリを提供することをお勧めします。これにより、デフォルトのフォントが見つからない場合の代替手段が提供されます。書き方としては、これらのフォントに優先順位をつけてカンマで区切って書きます。例:
rrree引用符の使用 上記の例では、一重引用符に気付いたかもしれません。フォント名に 1 つ以上のスペースが含まれる場合、またはフォント名に記号が含まれる場合は、引用符を使用します。 CSS2.1 には、記号を含む自己推薦に必ずしも引用符を使用する必要はないという仕様がありますが、これは「ベスト プラクティス」と同様に推奨される方法です。
Bold font-weightfongt-weight を太字フォントに使用できることは誰もが知っています。これらのキーワードは、フォントのデザイン時にフォントに指定された 9 レベルの太さにマップされます。フォントのデザイン時に太さのレベルが指定されている場合、スタイル シートにフォントの太さの値を記述することで太さの効果が得られることに注意してください。ただし、フォントの設計時に太さのレベルが指定されていない場合、100、200、300、および 400 はすべて同じ薄い変形にマッピングされます。 700、800、900 はすべて同じ粗い変形にマッピングされます。このような問題は実際のアプリケーションでよく発生します。 400 は標準に対応し、700 は太字に対応します。他の値はバリアント名に対応しません。
フォント サイズのパーセンテージ値は em と同じ効果があり、100% は 1em に相当し、親要素のサイズを基準にして計算されます。継承する場合、フォント サイズはパーセンテージではなく、特定の計算値のみを継承します。フォントを制御するためにパーセンテージを使用する場合の欠点は、ユーザー エージェントがフォント サイズの計算後に四捨五入操作を実行するか、一部の小数点以下を保持するため、計算されるパーセンテージが多すぎるとフォントのスケーリングが制御できなくなる可能性があることです。
スタイルと変換---スタイル font-style---イタリック (斜体) テキストと斜体 (イタリック) テキストの違い イタリックは、各文字の構造にいくつかの小さな変更を加えた個別のフォント スタイルです。イタリックは、フォント構造を変更せずに、縦書きテキストを斜めにしたバージョンです。イタリックフォントがなく、Oblique フォントがある場合は、後者が使用されます。ただし、斜体フォントはあっても斜体フォントがない場合、ユーザー エージェントは縦書きテキストのみを使用して斜体バージョンを計算し、斜体フォントを生成します。 ---font-variant---small-caps では、小さな大文字のテキストが必要です。これは text-transform:uppercase に似ています。スモールキャップを宣言するためにフォント属性を使用する必要がある理由は、一部のフォントには設計時に特定のスモールキャップフォントが含まれるためです。そのようなフォントが存在しない場合、ユーザー エージェントは大文字自体を拡大縮小して小文字フォントを作成します。
フォントのストレッチと調整 font-stretch、フォントのストレッチを可能にします font-size-adjust、優先フォントが利用できない場合に置換フォントの拡大縮小を可能にします。 これら 2 つの属性は CSS2.1 で削除されました。これらの 2 つの属性は仕様に長年存在していましたが、どのブラウザも実装していなかったためです。
フォント マッチング CSS を使用すると、フォント ファミリーのマッチング、太字化、変形をすべてフォント マッチングを通じて行うことができます。ユーザー エージェントがフォントを照合するための手順は、大まかに次のとおりです。 1. ユーザー エージェントは、通常、ユーザーのマシンにインストールされているすべてのフォントと、ユーザー エージェントの組み込みフォントを対象としたフォント属性データベースを構築します。等ユーザー エージェントが 2 つの等しいフォントに遭遇した場合、そのうちの 1 つは無視されます。 2. ユーザーエージェントは、フォント属性が適用される要素を取得し、このリストに基づいて最初のスクリーニングを実行します。完全に一致する場合、そのフォントが使用されます。一致する順序: フォント スタイルに従って一致、イタリック フォントと斜体フォントと一致、フォント バリアントに従って一致、スモールキャップ フォントと一致、フォント サイズに従って一致上記の 2 つの手順でフォントが見つかった場合は、候補フォントが検索されます。
font-face のルール font-face の紹介: Iconfont の遊び方
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
