CSSフォント
この記事は、HTML CSSフォントとそのプロパティを教えることを目的としています。テキストを大胆またはセミボルドにすること、CSSのフォントサイズまたはフォントファミリなどを変更することを学びます。
また、CSSフォントプロパティとフォントプロパティの一般的な分類の違いも表示されます。これらの基本は font？記事で説明されています。
CSSフォント
CSSのフォントは、グリフの視覚的表現を含むリソースです。単純化するために、グリフとコードを一致させる情報があります。
フォントリソースは、ブラウザが機能するデバイスにローカルにセットアップできます。情報を記述するこのようなフォントの場合、フォントリソースから(たとえば、ファイル montserrat.ttf)から取得できます。 Webフォントの場合、そのような情報はフォントのリソース上のリンクと添付されています。
CSSフォントプロパティ
CSSは、Webページ上のフォントの外観と動作を制御するためのいくつかのフォントプロパティを提供します。それらを個別に使用するか、CSSで望ましいタイポグラフィ効果を実現するために組み合わせることができます。それらのすべてがすべてのブラウザでサポートされているわけではないため、これらのプロパティを使用する際には、クロスブラウザーの互換性を考慮することが不可欠です。 それらのいくつか(最も使用されている)を見てみましょう：
- フォントファミリー;
- font-weight;
- フォントストレッチ;
- フォントスタイル;
- フォントサイズ;
- フォント;
- フォント合成、
- テキストデカレーション、
- テキスト変換、
- 文字間隔、
- ラインハイト、
- 単語間隔。
CSSフォントファミリ
一般的なデザインのフォントは、通常、フォントファミリにグループ化されます。家族内では、グリフの幅、勾配、または重量が異なる場合があります。
CSS「Font-Family」プロパティは、書体選択に使用されます。フォントがユーザーのコンピューターで使用可能かどうかを予測するのが難しいため、1つのタイプのフォントのすべてのバリエーションを通知することをお勧めします。この場合、ブラウザはその存在を確認し、通知されたフォントを1つずつ整理します。
CSSフォントファミリプロパティが継承されます。
CSSフォントファミリーには次の値があります。
- フォントファミリーの名前(「Verdana」、
montserrat、「Courier」)。 - ジェネリックファミリー。ここでは、5つの フォントタイプのいずれかに注意する必要があります。Serif、Sans serif、cursive(スクリプトフォントに等しい)、ファンタジー(ディスプレイフォントに等しい)、またはモノスペース。
hirtsed-デフォルト値を設定します。- 「継承」 - 親の後にその価値を取得します。
使用の例。
そこでは、次のパラメーターが例に設定されています。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font-family: | Lobster, Paisfico, cursive; | Audiowide, fantasy; | Courier, monospace; |
構文：
1// text 1
2.text1 {
3 font-family: Lobster, cursive;
4}
5// text 2
6.text2 {
7 font-family: Audiowide, fantasy;
8}
9// text 3
10.text3 {
11 font-family: Courier, monospace;
12}適用の結果は次のものになるでしょう(フォントサイズと色は、 <body>の3つのテキストすべてで同じように設定されていることに注意してください)
CSSフォント重量
Font-Weightプロパティは、フォントラインの厚さに責任があります。
CSSフォント重量プロパティが継承されます。
HTMLでは、css font-weightが次の値を持つ場合があります。
remorm-は400に等しいデフォルト値です。bold- フォントをセミボルドにします。 700重量に等しくなります。Bolder- 先祖よりも重い重量を重く設定します。Lighter- 先祖よりも重量を軽く設定します。-100、200、300、400、500、600、700、800、900-100が最も軽いフォントを作り、900は最も重い(最も大胆な)フォントを作ります。hirtsed-デフォルト値を設定します。inherit- 親の後にその価値を取得します。
使用の例。
フォントウェイトの次のパラメーターを使用してテキストをレンダリングしましょう。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font-weight: | 900; | 500; | 200; |
構文：
1// text 1
2.text1 {
3 font-weight: 900;
4}
5// text 2
6.text2 {
7 font-weight: 500;
8}
9// text 3
10.text3 {
11 font-weight: 200;
12}適用の結果は次のようになります(フォントサイズと色は、 <body>の3つのテキストすべてで同じように設定されていることに注意してください)。また、使用済みのフォントには必要な重量の変動が必要であることを覚えておくことが重要です。ほとんどのフォントは、semi-boldおよび normalの重みでのみ使用できます。この例で使用されているフォント segoe uiには十分なfont-weightバリエーションがあるため、テキストは例で設定されたすべての値にレンダリングされます。
CSSフォントストレッチ
プロパティ font-strechを使用すると、フォントファミリから通常、凝縮、または拡張された書体を選択できます。このHTML CSSプロパティは、すべてのフォントに対しても機能しません。バリアントストレッチを備えた家族の書体にある特別に設計されたフォントのみが、このプロパティをレンダリングできます。
CSSフォントストレッチプロパティが継承されます。
CSSのフォントストレッチの値は次のことです。
ultra -Condensed-Most Condensed Fontの場合。extra-condensed- 2番目に凝縮したフォントの場合。condensed- 凝縮フォント用。semicondensed- わずかに凝縮したフォント用。normal- デフォルト値。semi-expanded- わずかに拡張されたフォント用。expanded- 拡張されたテキスト用。extra-expanded- 2番目に拡張されたフォントの場合。Ultra -Expanded-最も拡張されたフォントの場合。hirtsed-デフォルト値を設定します。inherit- 親の後にその価値を取得します。
使用の例。
フォントストレッチの次のパラメーターでテキストをレンダリングしましょう。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font-stretch: | condensed; | normal; | expanded; |
構文：
1// text 1
2.text1 {
3 font-stretch: condensed;
4}
5// text 2
6.text2 {
7 font-stretch: normal;
8}
9// text 3
10.text3 {
11 font-stretch: expanded;
12}適用の結果は次のようになります(フォントサイズと色は、 <body>の3つのテキストすべてで同じように設定されていることに注意してください)。
CSSフォントスタイル
このプロパティは、フォントスロープを調整します。
CSSフォントスタイルのプロパティが継承されます。
HTML CSSのフォントスタイルのプロパティには、次の値がある場合があります。
normal- フォントの通常の勾配を設定するデフォルト値。italic」 - テキストを筆記体でマークします。oblique-フォントの傾斜した書体を設定します(フォントには、その書体のバリエーションが傾斜したものがあります)。hirtsed-デフォルト値を設定します。inherit- 親の後にその価値を取得します。
使用の例。
フォントスタイルの次のパラメーターでテキストをレンダリングしましょう。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font-style: | normal; | italic; | oblique; |
構文：
1// text 1
2.text1 {
3 font-style: normal;
4}
5// text 2
6.text2 {
7 font-style: italic;
8}
9// text 3
10.text3 {
11 font-style: oblique;
12}適用の結果は次のようになります(フォントサイズと色は、 <body>の3つのテキストすべてで同じように設定されていることに注意してください)。
「イタリック」と「斜め」の結果が同じように見えることに気づいたかもしれません。これに対する答えは、値「斜め」は、フォントがそれ自体が斜めの書体を持っていて、使用されているフォントには機能しない場合にのみ機能するということです。
CSSフォントサイズ
プロパティは、フォントのグリフの高さを設定します。
CSSフォントサイズのプロパティが継承されます。
CSSフォントサイズには次の値があります。
- 絶対サイズ - それは
xx-small、x-small、small、medium、large'、x-large、またはxx-large`である可能性があります。デフォルトの値は「中」です。 - 相対サイズ - フォントの祖先と比較したサイズ。 「小さい」または「大きい」ことができます。絶対サイズが許すよりもさらに大きくまたは小さくフォントを作成できます。
- 幅 - ピクセル(PX)またはEMS(EM)で設定されています。 EMそれは、Webドキュメントに使用されるスケーラブルなユニットです。 1つのEMは、現在のフォントサイズに等しくなります。ドキュメントのフォントサイズが14ptの場合、1EMは14ptに等しくなります。 EMはスケーリングされているため、2EMは28ptに等しくなります。
％- この相対値は、祖先フォントと比較して計算されます。これにより、CSSフォントサイズをより正確に調整することができます。- Viewpoint width -
vw、使用済みブラウザのウィンドウのサイズに続いてフォントを許可します。ビューポート幅の1VW = 1％であることに注意してください。ビューポートの幅が40cmの場合、1VWは0.4cmに等しくなります。 hirtsed-デフォルト値を設定します。- 「継承」 - 親の後にその価値を取得します。
使用の例。
そこでは、次のパラメーターが設定されています。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font-size: | 7vw; | 70px; | 2em; |
構文：
1// text 1
2.text1 {
3 font-size: 7vw;
4}
5// text 2
6.text2 {
7 font-size: 70px;
8}
9// text 3
10.text3 {
11 font-size: 2em;
12}適用の結果は次のようになります(フォントファミリーと色は、 <body>の3つのテキストすべてで同じように設定されていることに注意してください)。
CSSフォント
CSS「Font」プロパティは、コードを短くするために使用されます。これにより、他のすべてのフォントプロパティを1つのプロパティに設定することができます。次のプロパティを指定できます。
font-style、font-variant、 font-weight、font-stretch、 font-size/line-height、およびfont-family。また、CSS 2.1-「通常」または「スモールキャップ」によってサポートされている「フォント変数プロパティ」の値を含めることもできます。
font variantの
font？の記事の段落を参照して、このプロパティに関する詳細情報を取得します。
使用の例。
そこでは、次のパラメーターが設定されています。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font: | 6vw Arial; | 60pt Courier, monospace; | - |
構文：
1// text 1
2.text1 {
3 font: 6vw Arial;
4}
5// text 2
6.text2 {
7 font: 60pt Courier, monospace;
8}
9// text 3
10.text3 {
11}これらのパラメーターを適用した結果は、下の写真にあります( <body>の3つのテキストすべてで色が同じに設定されていることに注意してください)。 3番目のテキストの値を設定しなかったため、デフォルトのパラメーターでレンダリングされました。
CSSフォント合成
このHTML CSSプロパティは、フォントファミリに存在しない場合、ブラウザがSemiboldまたは斜めのフォントスタイルを合成できるかどうかを定義します。したがって、font-weightとfont-styleが指定されていない場合、ブラウザはSemiboldまたは斜めのスタイルを合成してはなりません。
フォント合成プロパティが継承されます。
CSSフォント合成パラメーターの場合、次の値が設定される場合があります。
none」 - 合成を禁止します。weightまたはstyle- 有名なプロパティ/プロパティを合成することができます。hirtsed-デフォルト値を設定します。inherit- 親の後にその価値を取得します。
使用の例。
そこでは、次のパラメーターが設定されています。
| プロパティ | テキスト 1 の値 | テキスト 2 の値 | テキスト 3 の値 |
|---|---|---|---|
| font-synthesis: | weight; | style; | none; |
| font-weight: | 900; | - | 900; |
| font-style: | - | oblique; | oblique; |
構文：
1// text 1
2.text1 {
3 font-synthesis: weight;
4 font-weight: 900;
5}
6// text 2
7.text2 {
8 font-synthesis: style;
9 font-style: oblique;
10}
11// text 3
12.text3 {
13 font-synthesis: none;
14 font-weight: 900;
15 font-style: oblique;
16}適用の結果は、次の画像に示されているようにレンダリングされます( <body>の3つのテキストすべてで色が同じに設定されていることに注意してください)。 3番目のテキストの「なし」値を設定すると、デフォルトのパラメーターでレンダリングされました。
フォントスタック##
フォントスタックには、特定のフォントがユーザーのデバイスまたはシステムに障害または存在しない場合、フォールバックオプションとして使用されるカスケードスタイルシート(CSS)で定義されたフォントのリストを参照してください。彼らは、Webデザイナーがさまざまなプラットフォームとブラウザにわたってタイポグラフィの一貫性を維持できるようにします。
CSSのフォントファミリーを指定するには、選好の順に複数のフォントをリストすることにより、フォントスタックを定義することが一般的です。最初のオプションが使用できない場合、ブラウザは、作業オプションが見つかるまでスタック内の次のオプションを使用しようとします。
CSSでフォントファミリーを指定するためのフォントスタックの例を見てみましょう。ここで、スタックの開始の好ましいフォントは「Helvetica neue」です。利用できない場合、ブラウザで試した次のオプションは「Arial」です。 「arial」も失敗した場合、ブラウザは一般的なsans-serifフォントに戻ります。
1 font-family: "Helvetica Neue", Arial, sans-serif;フォントスタックの最後のオプションとして、「sans-serif」、「serif」、「monospace」などの一般的なフォントファミリを指定することは、良い実践と見なされます。優先フォントがいない場合に備えて、ブラウザに適切なフォールバックフォントが表示されるようになります。
Webセーフフォント
システムフォントまたはデフォルトフォントとも呼ばれるWebセーフフォントは、さまざまなオペレーティングシステムやデバイスで一般的に利用できるフォントのコレクションです。それらは広くサポートされており、ユーザーのデバイスに存在する可能性が高いため、Webデザインで安全に使用できると考えられています。
Web開発の初期には、デザイナーは、さまざまなシステムでのフォントの可用性が変動するため、フォントオプションが限られていました。その結果、ほとんどのコンピューターに広くインストールされているフォントのコアセットに依存していました。
有名なWebセーフフォントの例をいくつか紹介します。
- アリアル
- ヘルベティカ
- 新しいローマ
- ジョージア
- Courier New
- ヴェルダナ
- タホマ
- Trebuchet MS
多くの場合、「フォールバックフォント」と呼ばれ、優先フォントが利用できない場合は安全な選択であると見なされるため、フォントスタックで指定されます。
ただし、Webテクノロジーの進歩とGoogleフォントやTypeKitなどのサービスを介したカスタムフォントの広範な使用により、Webセーフフォントへの依存が減少しました。現在、Webデザイナーは、ウェブサイトの視覚的な魅力を強化するために、より柔軟性と幅広い範囲のフォントを持っています。
CSSで外部フォントを使用する方法は？
CSSで外部フォントを使用するには、 @font-faceルールを使用できます。カスタムフォントを指定し、Webページにアクセスできるようにすることができます。 CSSで外部フォントを使用する方法を見てみましょう。
- フォントファイルを取得します。
- WOFF、WOFF2、TTF、またはEOTなど、目的の フォント形式でファイルを見つけます。
- Googleフォントのようなフォントサービスからフォントファイルを取得するか、信頼できるソースから購入/ダウンロードできます。
- フォントファイルをアップロードします。
- フォントファイルをWebサーバーまたはプロジェクト内の指定されたフォルダーにアップロードします。
- @font-faceルールを定義します。
- Fontファイル名を指定し、フォントファイルへのパスを提供するために、CSSファイルでそれを実行し、フォントファイルとそれぞれの形式へのパスを指定します。さまざまなブラウザをサポートする複数の形式を含めます。
このような操作の例は次のとおりです。
1 @font-face {
2 font-family: 'MyCustomFont';
3 src: url('path-to-fonts/MyCustomFont.woff2') format('woff2'),
4 url('path-to-fonts/MyCustomFont.woff') format('woff');
5 /* Add additional formats if available */
6 }- フォントを適用します： @font-faceルールを定義した場合、以下の例のように、CSSルールのフォントファミリープロパティを指定することにより、カスタムフォントを使用できます。ここでは、「mycustomfont」という名前のカスタムフォントがボディ要素に適用されます。カスタムフォントが使用できない場合、ブラウザは一般的なSANS-SERIFフォントに戻ります。
1 body {
2 font-family: 'MyCustomFont', sans-serif;
3 }- さまざまなブラウザやデバイスでWebページをテストおよび検証します。
応答性のあるタイポグラフィについてのいくつかの言葉
レスポンシブタイポグラフィは、ウェブサイトにタイポグラフィを設計および実装する慣行であるため、さまざまな画面サイズとデバイスに調整および適応します。これには、さまざまな画面サイズと方向の読み取り体験を最適化するために、フォントサイズ、ラインの長さ、間隔などの要因を考慮します。
応答性のあるタイポグラフィのいくつかの重要な側面は次のとおりです。
固定フォントサイズを使用するのではなく、レスポンシブタイポグラフィは、パーセンテージ、EMS、REMなどの相対ユニットを使用して、画面サイズまたはビューポートの寸法に基づいてテキストを比例して拡大します。
レスポンシブタイポグラフィは、多くの場合、メディアクエリとともに実装され、特定の画面幅またはデバイス機能に基づいてフォントスタイルの適応を可能にします。これにより、さまざまなブレークポイントのカスタマイズされたタイポグラフィ調整が可能になります。
VW(ビューポート幅)やVH(ビューポートの高さ)などのCSSビューポートユニットは、ビューポートの寸法に対するフォントのサイズに使用されます。このアプローチにより、ユーザーがブラウザウィンドウをサイズまたはデバイス間で切り替えるにつれて、フォントサイズがスムーズに適応することが保証されます。
応答性のあるタイポグラフィは、読みやすさのための最適な線の長さ(1行あたりの文字数)を考慮します。大きな画面上の長い線は、マージンを調整するか、最大幅を適用することで管理できます。さらに、cr屈または過度に間隔を空けたテキストを避けるために、線の高さ(線間の垂直間隔)は慎重に考慮されます。
小型のデバイスに限られた画面スペースがあるため、明確なタイポグラフィ階層を確立することが重要です。デザイナーは、読みやすさのために見出し、サブヘディング、ボディテキストが適切に区別されるようにする必要があります。
テキストと背景のコントラスト比を考慮し、視覚障害のあるユーザーに十分な間隔を提供し、さまざまなユーザーの好みに対応するための柔軟なフォントサイズの調整を可能にすることにより、アクセシビリティを優先します。
結論
CSSフォントは、CSSとのインターフェイスの開発における重要なブロックの1つです。 Webページの大部分のコンテンツのほとんどはテキストコンテンツです。そのため、このプロパティを学習せずに、このコンテンツは高品質の外観になることはありません。読みやすさ、スケーラビリティなどが少なくなります。
一部のプロパティは任意のフォントに簡単に適用できますが、一部のプロパティには、プロパティのバリエーションをサポートする特別なフォントが必要です。フォントのように、ほとんどのフォントが「通常」または「太字」しかない場合、「Inconsolata」には8つのバリエーションがあります。 使用したいフォントを念頭に置いているが、デバイスにそれを持っていない場合は、Asposeから無料のWebアプリケーションから見つけてダウンロードしようとすることができます。それとは別に、 font Viewerは、開発時に必要なフォントに関する必要な情報を提供します。