Googleフォントで可変フォントを最大限に活用する

私は何年も再帰的なSans＆Mono Fontファミリを開発しました（素晴らしいチームと一緒に！）、ついにGoogle Fontsで利用できます！

すぐに使用したいですか？ Googleフォントからの完全な再帰変数フォントファミリの埋め込みコードは次のとおりです（ただし、最適な柔軟性とパフォーマンスのために、読んでください！）。

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

再帰は、Kabk Typemediaでの私のタイプデザインマスターの論文として始まりました。その後、My FoundryであるArrow Typeは、GoogleフォントからオープンソースのOFLフォントとして再帰的な再帰を完了してリリースするよう依頼されました。

Recursive.Designで再帰とその機能を探索します。

Recursiveは、Webサイトやコード用の多用途のフォントファミリーであり、開発者やデザイナーに最新の美学と最先端のフォントテクノロジーのブレンドを提供します。

明確にしましょう：可変フォントには、単一のファイル内のさまざまなスタイルが含まれているため、ユーザーはStylesをFluidlyを選択できます。これらの範囲は、重量、幅、光学サイズ、スラントなどのパラメーターを表す可変軸と呼ばれます。再帰的には、「モノスパッチ」（モノからサンズまで）と「カジュアル」（線形からブラシスタイルまで）を制御できます。各フォントファミリには複数の軸を持つことができます。これは、主要な設計上の考慮事項です。

Google Fontsには変数フォントが追加されていますが、多くの（再帰を含む）は、デフォルトのインターフェイスが示すよりもはるかに文体的なオプションを提供します。使いやすくするために、Googleフォントはディスプレイを簡素化し、主に「重量」軸を表示します。ただし、これは再帰の64のプリセットスタイルと5つの可変軸を隠しています。 Google Fontsページには8つのスタイルと1つの軸が表示されますが、再帰的なものは実際にはもっと多くを提供します。

再帰は、4つの「サブファミリー」に分けることができます。

• sans linear：標準の比例sans-serifフォント（Googleフォントに表示）。
• カジュアル：比例した「ブラシカジュアル」フォント。
• モノリニア：標準のモノスペースフォント。
• モノカジュアル：モノスペース「ブラシカジュアル」フォント。

これを視覚化することは、説明するよりも簡単です。 2つのテーブル（1つはSANS用、もう1つはモノ用）を示しています。 Google Fontsインターフェイスには、8つのみに加えて、重量軸が表示されます。

Google Fontsの多様なユーザーベースを考えると、この重量のみのアプローチは理解できますが、フォントの可能性が制限されます。 Google Fonts APIはソリューションを提供します。

変数フォントとその効率を理解する

Web開発者は、特大のJPEGを提供しないことを知っています。同様の原則がフォントに適用されます。文字をサブセットし、Woff2圧縮を使用してファイルサイズを削減します。

変数フォントはビデオファイルのようなものです。これらには、特定の値にトリミングまたは「固定」できる情報の範囲（可変軸）が含まれ、ファイルサイズを縮小します。ビデオとは異なり、フォントはベクトル形状を使用します。変数フォントには、複数の「ソースロケーション」（キーフレーム）があります。スタイルは、これらの場所（デルタ）間を数学的に補間することによって作成されます。可変フォントのトリミングとは、不要なデルタを削除することを意味します。

たとえば、再帰のカジュアルな軸は、「線形」と「カジュアルな」文字形式の間を補間します。 Ampersand Glyphアニメーション（ここには示されていません）はこれを示しています。

追加される各軸は通常、図面の数を2倍にします。 Google Fonts APIを使用すると、必要な軸のみを選択して、ファイルサイズが小さくなります。

可変軸タグ

軸の略語は、4文字のタグ（Microsoft定義の軸の小文字、カスタム軸の大文字）です。 5つの標準軸が存在します：

• wght - 重量
• wdth - 幅
• opsz - 光学サイズ
• ital - イタリック
• slnt - スラント

再帰は、3つのカスタム軸（ MONO 、 CASL 、 CRSV ）とwghtおよびslntを使用します。

GoogleフォントAPI

Google Fontsインターフェイスは、Google Fonts APIを呼び出すURLを生成します。このURLには部分があります：

1. API URL（ https://fonts.googleapis.com/css2 ）
2. フォントファミリパラメーター
3. font-displayプロパティ

再帰の通常の重量（sans linear）を使用するには、以下を使用します。

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

または、HTMLで：

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

次に、CSSのフォントを適用します。

 <code>body { font-family: 'Recursive', sans-serif; }</code>

デフォルトの軸値： MONO 0 、 CASL 0 、 wght 400 、 slnt 0 、 CRSV 0 。

スタイルまたは軸の指定

APIには2つのアプローチがあります。

1. 軸と特定の値のリスト。
2. 軸と範囲のリスト。

カジュアルなスタイルを取得するには、 Recursive:CASL@1 。モノカジュアルレギュラーの場合：

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

レギュラーとボールドのために：

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Googleフォントは、多くの場合、複数の要求されたスタイルをカバーする単一の変数フォントを提供します。生産には、必要なスタイルのみを要求します。可変軸を使用すると、柔軟性が得られます。

完全な変数フォントを取得します

柔軟性を最大化するには、可変軸を使用します。 Recursive:wght@400;700 、 Recursive:[email protected] （またはRecursive:[email protected]フルウェイト範囲の場合）。軸をアルファベット順に追加： Recursive:wght,[email protected],0..1 。

完全な変数フォントURL：

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

HTMLで：

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

柔軟性とファイルサイズのバランス

各軸はファイルサイズを増加させます。未使用の軸を省略します。さまざまなウェイトのモノカジュアルスタイルの場合：

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

（注：上記は現在正しく機能しない場合があります。更新については、元の記事を参照してください。）

複数のフォントファミリーを追加して、名前でアルファベット順に追加できます。

変数フォントを使用します

標準軸は標準のCSSプロパティを使用します（ font-weight: 425; ）。すべての軸はfont-variation-settingsを使用します。モノカジュアル非常に重いスタイルのために：

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings CSSカスタムプロパティでうまく機能します。

可変フォント設計の詳細は、variablefonts.ioおよびCSS-tricksで入手できます。

可変フォントパフォーマンス

64のすべての再帰スタイルを個別のファイルとして合計として使用します。変数フォントは〜537 kbです。完全な重量範囲のサブセット再帰Woff2は60 kbです。単一のスタイルは25 kbです。 3つのウェイトを使用すると、可変フォントで約15 kbを節約できます。完全な変数フォントサブセットは281 kbです。ファイルサイズを超えて、可変フォントは設計の柔軟性を提供します。 Googleフォントはフォント配信を最適化します。

元の記事の残りの部分は簡潔に省略されていますが、APIの使用、他の可変フォントの探索、著者の作業の宣伝に関する追加情報が続きます。

以上がGoogleフォントで可変フォントを最大限に活用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。