適応可能なフォント

これまで、フォントの重さとスタイルは別々のフォント ファイルに分離されていたため、デザイナーはスタイルごとに別々のファイルをアップロードする必要がありました。しかし、適応型フォントにより、単一フォントのすべてのバリエーションが 1 つのファイルに統合され、サイトのパフォーマンスが向上し、デザイナーはフォント スタイルをカスタマイズして、権限と適応性を高めることができます。

この指導セッションでは、次のことを理解します。

1. 適応可能なフォントの概念 
2. 適応可能なフォントとフォントの変更を活用する
3. フォントのバリエーションを使用してアニメーショントランジションを生成する
4. フォントの変更によるインタラクションの開発 
5. よくある質問と解決策

適応可能なフォントの概念 

適応型フォントとは、1 つのスタイルやインスタンスだけではなく、フォント ファミリ全体 (Open Sans、Roboto Flex など) を網羅するフォントです。以前は、デザイナーはさまざまなフォント ウェイト (Light 100、Bold 700 など) にアクセスするために複数のフォント ファイルを必要としていましたが、この方法ではデザインの粒度が制限され、サイトのパフォーマンスが低下する可能性がありました。適応型フォントはフォント ファミリの範囲内のすべてのウェイトを網羅するため、デザイナーはより複雑かつ正確にフォント スタイルをカスタマイズできます。 

簡単なヒント： 適応可能なフォントは、次のようなプラットフォームから見つけることができます。 Googleフォント, Vフォント、 そして フォンテスク. 

さらに、アダプティブ フォントは、以前はデザイナーがアクセスできなかった複数の軸 (つまり、フォント プロパティ) に沿った制御を提供します。フォントの既知の予測可能な属性 (太さ、幅、光学サイズ、傾斜、斜体) を管理する一般的な軸は 5 つありますが、アダプティブ フォントには、フォントの柔らかさ、線の太さの細さ、アセンダの高さなど、書体デザイナーが選択したフォントの他のデザイン要素を指示するカスタマイズされた軸を含めることもできます。 

適応性のあるフォントとフォントバリエーションを活用する

開始前に： 事前にカスタム適応フォントをアップロードしておく必要があります サイト設定 > フォント タブ。適応可能なフォントを見つけるには、次のようなプラットフォームが便利です。 Googleフォント, Vフォント、 そして フォンテスクカスタムフォントのアップロードについて詳しくは、こちらをご覧ください。 

重要な： Webflow は、TTF、OTF、WOFF、WOFF2 形式の適応型フォントをサポートします。EOT および SVG 形式はサポートされていません。 

適応型フォントを使用してフォントのバリエーションを作成するには: 

1. デザイナーキャンバスでスタイル設定したいタイポグラフィコンポーネント（見出し、テキストリンクなど）を選択します。
2. に移動 スタイルパネル > タイポグラフィ > フォント ドロップダウンから適応可能なフォントを指定します カスタムフォント 
3. の横にあるテキストボックスをクリックします バリエーション フォントバリエーションメニューを表示する
4. スライダーを動かすか、各バリエーションの横に手動で値を入力して、好みのフォントバリエーション（太さ、幅など）を調整します。

適応性のあるフォントを素早く特定するには、「ドット” はフォントピッカーでその横に表示されます。フォントピッカーでサポートされているバリエーションの数に関する追加情報は、フォントピッカーの “ ” にマウスを合わせると直接表示されます。ドット」

覚えておいてください: フォントの太さを設定すると スタイルパネル > タイポグラフィ セクションを指定し、その後に太さ軸にフォント バリエーションを追加すると、そのフォント バリエーションが以前に指定したフォントの太さに優先します。 

重要な： フォント バリアントを調整して別のフォントに切り替えると、元のフォントに対して以前に行われたフォントの変更はすべて消去されます。

役立つヒント: さまざまなメディア クエリ (「ブレークポイント」) 全体にわたって、または上位要素に個別のフォント バリアントを定義して、そのフォント バリアントをすべての子テキスト要素に実装することができます。他のタイポグラフィ特性 (フォント ファミリ、フォント サイズ、色など) と同様に、フォント バリアントは継承可能な属性です。

フォントバリアントを削除するには、フォントバリアントメニューを起動し、削除したいバリアント（太さ、幅など）にマウスを移動して「ごみ”アイコンをクリックします。

フォントのバリエーションでアニメーショントランジションを設定する方法

また、さまざまな要素の状況 (フロートオーバー、フォーカスなど) に合わせてフォントのバリエーションを設計し、基本状況 (「なし」) と代替状況の間でアクティブなトランジションを作成することもできます。

リマインダー： アニメーション化されたトランジションを設計する際はアクセシビリティに注意し、突然の動き、予期しない動き、または過度の動きを避けてください。配慮のある動きとアニメーションの使用について、さらに詳しく調べてください。

特定の状況に合わせてフォントのバリエーションを開発するには:

1. フォーマットしたい要素を指定します
2. 開く スタイルパネル > セレクタ 分野
3. 要素にジャンルを与えるか、クラスやタグがまだ適用されていない場合はHTMLタグを選択します。
4. クリック 下向き矢印 展開する 州 ドロップダウンから、デザインしたい状況（ホバー、押下、フォーカスなど）を選択します。
5. 案内する スタイルパネル > タイポグラフィ 可変フォントを選択します（選択した要素にフォントが以前に設定されていない場合、または選択した状況でフォントファミリー全体を変更したい場合）
6. 隣のテキストボックスを押す バリエーション フォントバリエーションメニューを表示する
7. コントローラーをスライドするか、各修飾子の横に手動で値を入力して、好みのフォント変更（例：太さ、幅など）を選択します。

リマインダー： アクセスできなくなります 状況 選択した要素にクラスまたは HTML タグが割り当てられていない場合は、ドロップダウンに表示されます。

次に、基本状態と代替状態の間の遷移をアニメーション化することを考えてみましょう。アニメーション化された遷移を作成するには、次の手順に従います。

1. 前述の手順に従って、代替状態のフォントバリアントを作成します。
2. 拡大する スタイルパネル > セレクタ 分野
3. タップして 下向き矢印 発表する 状況 ドロップダウンから「なし」を選択します
4. に行く スタイルパネル > 効果 「プラス”アイコンの隣に トランジション
5. 必要なトランジション効果（フォントの色、フォントのバリエーションなど）を組み込みます。
6. 指定する 間隔 トランジション効果の
7. 「イージングエディタを開く”アイコンをクリックして 緩和必要に応じて

フォントバリエーションでインタラクションを生み出す方法

Interactions は可変フォントもサポートしており、フォントのバリエーションを使用して異なるアニメーションを作成できます。

リマインダー： アニメーションを作成するときはアクセシビリティに配慮し、突然の動きや急激な動き、過度の動きは避けてください。意図的な動きやアニメーションの使用について詳しくご覧ください。

フォントのバリエーションとのインタラクションを作成するには:

1. 開始する インタラクションパネル
2. クリック "プラス”アイコンをクリックして 要素トリガー （例：マウスホバー、スクロールして表示など）または ページトリガー (例: ページの読み込み、ページのスクロールなど)
3. 展開する アクション 開始アクションセグメントからドロップダウンを展開します（つまり、マウスホバー要素トリガーを選択した場合は、 アクション ドロップダウンから ホバー時 セグメント）
4. 下のアニメーションを選択してください カスタムアニメーション
5. アニメーションをカスタマイズして選択する フォントバリエーション 下手順 セクション > 見て 上 フォーマットのバリエーション セクション
6. に移動 書体のバリエーション 隣のボックスを選択してください バリエーション 書体のバリエーション設定を表示する
7. コントロールを移動したり、各バリエーションの横にある値を入力して、好みの書体の調整（太さ、幅など）を調整します。

FAQと問題解決のヒント 

自分のデザインに適応できる書体はどこで見つけられますか? 

適応型書体は、次のようなプラットフォームで見つけることができます。 Googleフォント, Vフォント、 そして フォンテスク.

適応型書体と互換性のあるフォント ファイル形式はどれですか? 

Webflow は、TTF、OTF、WOFF、WOFF2 形式の適応可能な書体に対応しています。EOT および SVG 形式はサポートされていません。 

カスタマイズされたフォントの最大サイズはどれくらいですか? 

1 ファイルあたり最大 4 MB のフォントをアップロードできます。

この機能が導入される前にフレキシブルフォントをアップロードしましたが、バリエーションを追加できません。書体のバリエーションを追加するにはどうすればいいですか? 

進む サイト設定 > フォント タブで、適応型フォントを削除し、適応型フォント ファイルを再度アップロードします。その後、デザイナーでサイトにアクセスしたときに、書体のバリエーションを追加できるようになります。 

Google Fonts または Adobe Fonts 統合を介して適応可能なフォントを選択しましたが、書体のバリエーションにアクセスできません。書体のバリエーションを追加するにはどうすればいいですか? 

書体のバリエーションは、現在GoogleフォントまたはAdobe Fonts統合を通じて使用することはできません。フォント統合からフォントをダウンロードまたは入手し、カスタムフォントとしてアップロードすることができます。 サイト設定 > フォント タブをクリックして書体のバリエーションを活用します。カスタム フォントの詳細については、こちらをご覧ください。

新しい書体バリエーション軸でフォントがアップグレードされる前に、適応型フォントをアップロードしました。新しい軸に書体バリエーションを追加するにはどうすればいいですか?

新しい書体バリエーション軸を利用するには、フォントを再アップロードする必要があります。 サイト設定 > フォント タブで、適応可能なフォントを削除し、適応可能なフォントファイルを再度アップロードします。

一部の軸ラベルが期待どおりに表示されないのはなぜですか? 

デザイナーに表示される書体バリエーション軸のラベルは、アップロードされた適応型フォント ファイルに依存します。適応型フォントのタイプ デザイナーが人間にわかりやすいラベルを含めていない場合、Webflow はデフォルトで軸タグになります。

書体のバリエーションはどのように順序付けられますか? 複数の書体のバリエーションで同じ軸を共有できますか? 

書体のバリエーションは、CSS 仕様に準拠しているため、同じ軸に複数の変更を加えることができます。階層の最下位の軸が、適用された CSS で優先されます。たとえば、次の書体のバリエーションを考案したとします。 

傾斜: 0

重さ: 146

幅: 300

光学サイズ: 18

重さ: 1000 

書体に適用される最終的な「太さ」は 1000 です。 

「斜体」軸と「斜体」軸の違いは何ですか? 

イタリック軸と傾斜軸は密接に関連していますが、傾斜軸は斜体または直立スタイルのフォント ファイルの傾斜プロパティを管理しますが、イタリック体は筆記体の影響を受ける斜体スタイルとは異なるフレームワークを示します。 傾斜軸について詳しく知る.