Fonts
このページの日本語版はGoogle翻訳による機械翻訳です。
Fontとは何ですか?
フォントとは、文字、数字、句読点、その他の特殊文字など、同じ形状 (グラフィック)、書式 、形式 (標準、太字、斜体など) およびサイズを含む文字の完全なセットです。
フォントはWebサイトの見た目を表現する上で大きな役割を果たします。 タイポグラフィーとフォントの選択は Web サイトのデザインにとって非常に重要であり、ユーザーの Web サイト体験に大きな影響を与えます。
この記事の範囲内では、デザインにおけるフォントのチェックと CSS フォントの一部のプロパティの注意事項のみを学習します。
コーディング前にフォントを確認する
タスクを受けた最初のステップはデザインのチェックであり、デザイン内で最初に確認する対象はフォントです。
フォントをチェックした後、3つのケースがあります：
通常のフォント、デフォルトで使用可能
日本語フォントの場合、デザインでよく使用される次のようなフォントがマシンでデフォルトで利用可能です。
Meiryo, MS Gothic, Yu Gothic, Hiragino
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
Yu Mincho, Hiragino Mincho
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-weight: 500;
上記の場合は、上記のように販売するフォントファミリーを宣言してください。
Google、Adobe フォント
日本の顧客は、デザインを豊かにするためにさまざまな種類のフォントを使用することが多く、多くの場合、Google フォントや Adobe フォントを使用しています。
Google フォント
Googleが提供するフォントフェイスライブラリなので無料で著作権問題も侵害しません。
簡単に検索してダウンロードし、Web 上に埋め込むことができます。
一般的に使用されるフォントは次のとおりです。
Google フォントを Web に埋め込む場合は、 @import ではなく <link> メソッドを使用します。 CSS の「@import」は Web の読み込みを最適化しないため
Adobe フォント
Abobe フォントを使用する場合、Web に埋め込むコードを取得するには、プレミアム アカウントが付与される必要 があります。
アカウントは通常、顧客によって提供されます。
マネージャーが責任を持って指導いたします。
特殊なフォントの場合
特殊な場合としては、デザインをチェックしたところ、そのフォントがコンピュータに存在せず、Google フォントや Adobe フォントでも利用できないことが判明した場合です。
フォントをテキストとして使用するか画像として使用するかをクライアントに確認してください。
- テキスト形式を使用する場合:
- 顧客に、そのフォントのフォント ファイルとフォントフェイス パッケージを送信するよう依頼します。
- お客様がフォント ファイルをお持ちでない場合は、font-face またはデフォルト フォントを使用できるように、別の代替フォントを提案してください。
- 画像形式を使用する場合:
- 交換画像を受け取るには顧客の確認が必要です。
- フォントオブジェクトのアウトラインデザインデータをお客様にご送付いただきます。
CSSフォントに関する注意
デザインのフォントのプロパティを表示するには、Window -> Properties (Photoshop) に移動します。
Font-size
font-size 属性の値には rem 単位を使用することが望ましく、これは html(root) 要素の font-size から継承することを意味します。
html(root) 要素の font-size 属性の値を設定しない場合、 font-size のデフォルト値はブラウザによって決定されます (通常は 16px)。
Font-weight
Font-weight もフォントの重要な属性です。一般的なウェイト名 ではなく 値 を使用することをお勧めします。 例: font-weight: 600。
| Value | Common weight name |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |
Line-height
line-height プロパティの値には単位を使用しないでください。
文字の行の高さを計算するには、文字の高さをその文字のフォント サイズで割ります。
line-height: 1.6; // (57.6 / 36 = 1.6)
Letter-spacing
文字間隔属性の値には、「em」単位が優先されます。 慣例: 1em = 1000 (設計上の VA 値)。 したがって、文字の文字間隔を計算する式は、「その文字の VA 値を 1000 で割ったもの」になります。
letter-spacing: 0.05em; // (50 / 1000 = 0.05)
Fontの省略表記
構文：
font: [font-style] [font-variant] [font-weight] <font-size>[/line-height] <font-family>;
font-size と font-family の値は必須です。 他の属性が存在しない場合は、デフォルト値が適用されます。
👉 フォントのすべての CSS プロパティを参照してください こちら