【CSS Modules】size-adjustアットルール記述子の使い方

Copy
1/*
2 * @font-face ルール内で使用する `size-adjust` プロパティのサンプルです。
3 * `size-adjust` は、フォントのグリフサイズを調整し、
4 * 特に異なるフォント（例: カスタムフォントとシステムのフォールバックフォント）間で
5 * テキストの高さや行送りの一貫性を保つために役立ちます。
6 */
7@font-face {
8  font-family: 'MyAdjustedFont'; /* このカスタムフォントの名前を定義します */
9  /*
10   * ここでフォントファイルのパスと形式を指定します。
11   * 実際のフォントファイルのURLに置き換えてください。
12   */
13  src: url('path/to/my-adjusted-font.woff2') format('woff2'),
14       url('path/to/my-adjusted-font.ttf') format('truetype');
15  font-weight: normal; /* フォントの太さを指定 */
16  font-style: normal;  /* フォントのスタイルを指定 */
17
18  /*
19   * `size-adjust` プロパティは、フォントのサイズをパーセンテージで調整します。
20   * 例えば `110%` は、フォントのサイズを通常の1.1倍に拡大して表示することを意味します。
21   * これにより、このフォントが他のフォント（例: システムのデフォルトフォント）と
22   * 並んだときに、視覚的な高さを揃えることができます。
23   */
24  size-adjust: 110%;
25}
26
27/*
28 * 上記で定義した 'MyAdjustedFont' をHTML要素に適用する例です。
29 * このスタイルが適用されたテキストは、`size-adjust` で調整されたサイズで表示されます。
30 */
31body {
32  font-family: 'MyAdjustedFont', sans-serif; /* カスタムフォントを優先し、利用できない場合はsans-serifを使用 */
33  font-size: 16px; /* テキストの基本サイズ */
34  line-height: 1.5; /* 行の高さ */
35}
36
37/*
38 * より具体的な要素に適用する例
39 */
40h1 {
41  font-family: 'MyAdjustedFont', serif;
42  font-size: 2em; /* 親要素のfont-sizeに対する相対サイズ */
43}

CSSのsize-adjustは、@font-faceルール内で使用されるプロパティです。このプロパティは、フォントのグリフ（文字の形）サイズをパーセンテージで調整するために用いられます。特に、ウェブページでカスタムフォントとシステムの標準フォント（フォールバックフォント）が混在する場合に、それぞれのフォントで表示されるテキストの高さや行送りの視覚的な一貫性を保つ目的で役立ちます。

size-adjustには、例えば110%のようにパーセンテージ値を指定します。これにより、指定されたフォントのグリフが通常の1.1倍に拡大して表示されることになります。この調整によって、たとえ異なるフォントであっても、文字の大きさを揃え、レイアウトの崩れを防ぐことが可能になります。

サンプルコードでは、@font-faceブロック内でMyAdjustedFontという名前のカスタムフォントを定義し、そのフォントにsize-adjust: 110%;を適用しています。これにより、このカスタムフォントが通常より10%拡大されてレンダリングされます。その後、bodyやh1などのHTML要素にfont-family: 'MyAdjustedFont', sans-serif;のように指定することで、調整されたカスタムフォントが実際にウェブページに適用され、視覚的な一貫性が向上します。このプロパティは引数や戻り値を持つ概念ではありませんが、指定されたパーセンテージ値によってフォントのサイズ調整という挙動をもたらします。