ほとんどの場(chǎng)合、2つの異なるフォントファイルも必要です。1つはイタリック用、もう1つは通常のフォント（ローマ）です。これは、これらのフォントの構(gòu)築が根本的に異なる可能性があるために起こります。 Font-Variation-settings

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

wdth - 幅。これは、フォントストレッチCSSプロパティと同じです。キーワードまたはパーセンテージ?jìng)帳蛉·毪长趣扦蓼埂￥长屋Sは通常、フォントデザイナーによって定義され、エレガントに拡張または凝縮します。

イタリック化 - イタリックに設(shè)定された場(chǎng)合、フォントスタイルのCSSプロパティによって制御されます。

上記と同じWebページとフォントを使用して、低レベルのコントローラーを使用してフォントの重みと幅を設(shè)定してみましょう。
codepenのSitePoint（@SitePoint）のペン変數(shù)フォント1を參照してください。
宣言は、次のCSS宣言に相當(dāng)します

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

パフォーマンス

パフォーマンスは、可変フォントの重要な利點(diǎn)です。 avenirnext_variable.ttfフォントファイルはわずか89kbですが、さまざまな重みを作成します。同等の標(biāo)準(zhǔn)フォントは、ファイルが小さい場(chǎng)合がありますが、1つの重みとスタイルのみをサポートします。さらなるオプションは追加のファイルが必要であり、それに応じてページの重みを上げます。

Googleは、ファイルを圧縮してWoff2形式に変換するコマンドラインツールを提供しています。

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

ページ上のすべてのフォントウェイトに使用できる42kbの1つのファイルがあります。 Woff2形式の唯一の欠點(diǎn)は、Internet Explorerによってサポートされていないことです。 異なるブラウザに異なるファイルを提供する

<span>h1 {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>font-weight: 430;
</span><span>}
</span>

一部の最新のブラウザはすでに可変フォントをサポートしていますが（Firefox Developer Editionにはある程度のサポート、Chrome 62、Chrome Android、Safari iOS、およびSafari）、そうでないものが見つかった場(chǎng)合がある場(chǎng)合があります。 >

<span>p {
</span>  <span>font-variation-settings: 'wght' 630, 'wdth' 88;
</span><span>}
</span>

次の例では、私たちが作業(yè)しているファイル形式とは異なるファイル形式を使用しますが、同じ原則を使用します。

Chromeなどの可変フォントをサポートするブラウザで結(jié)果を確認(rèn)すると、次のことがわかります。

<span>p {
</span>  <span>font-weight: 630;
</span>  <span>font-stretch: 88;
</span><span>}
</span>

しかし、変數(shù)のフォントをサポートしていないブラウザにまだ変數(shù)不可能なフォントを提供する必要がある場(chǎng)合、可変フォントで得たパフォーマンスをすべて失いませんか？ブラウザが標(biāo)準(zhǔn)のフォントのみをロードできる場(chǎng)合、可変フォントのパフォーマンスとレンダリングの利點(diǎn)が失われます。これらの狀況では、多くの固定フォントに置き換えるよりも、同等のオペレーティングシステムフォントにフォールバックすることが望ましい場(chǎng)合があります。

すべてのブラウザでサポートされている可変フォントはありますか？

今のところ、Chrome、Firefox、Safari、Edgeなどのほとんどの最新のブラウザは、変數(shù)フォントをサポートしています。ただし、これらのブラウザの古いバージョンとあまり一般的でないブラウザは、それらをサポートしていない場(chǎng)合があります?？蓧浈榨━螗趣翁囟à违芝楗Ε顶单荸`トをチェックし、サポートされていないブラウザにフォールバックフォントを提供することをお?jiǎng)幛幛筏蓼埂?。 Googleフォントでフォントを選択すると、「変數(shù)」オプションを選択して変數(shù)フォントバージョンをダウンロードできます。その後、CSSの「フォント変數(shù)セッティング」プロパティを使用して、フォントのバリエーションを調(diào)整できます。

人気のある変數(shù)フォントは何ですか？

Roboto、Source Sans、Amstelvar、Decovarなど、利用可能な多くの人気のある変數(shù)フォントがあります。これらのフォントは幅広いバリエーションを提供し、さまざまなデザインスタイルに適しています。 v-fonts.comやGoogleフォントなどのWebサイトで、より多くの変動(dòng)フォントを見つけることができます。

獨(dú)自の変數(shù)フォントを作成するにはどうすればよいですか？ FontLab VIやGlyphsなどの特定のソフトウェア。これらのプログラムを使用すると、フォントのさまざまなバリエーションを設(shè)計(jì)し、単一の変數(shù)フォントファイルとしてエクスポートできます。ただし、フォント設(shè)計(jì)は、多くの練習(xí)とスキルを必要とする複雑なプロセスです。

可変フォントの制限は何ですか？

変數(shù)フォントには多くの利點(diǎn)がありますが、いくつかの制限もあります。すべてのフォントが可変形式で利用できるわけではなく、すべてのブラウザがそれらをサポートするわけではありません。さらに、フォントのバリエーションを調(diào)整することは複雑であり、CSSとフォント設(shè)計(jì)を十分に理解する必要があります。最後に、可変フォントはファイルサイズを削減できますが、多くのバリエーションを使用すると、それを増やすこともできます。ロードする必要があるフォントファイルの數(shù)。さまざまなフォントの重みとスタイルに複數(shù)のファイルをロードする代わりに、Webサイトは単一の変數(shù)フォントファイルをロードして、必要に応じてバリエーションを調(diào)整できます。これにより、ファイルのサイズを削減し、Webサイトの読み込み速度を改善できます。

変數(shù)フォントをアニメーション化できますか？ 「Font-Variation-Settings」プロパティをアニメーション化することにより、時(shí)間の経過とともにフォントの重み、幅、スラント、またはその他の屬性を変更する動(dòng)的なテキスト効果を作成できます。 ？

Webタイポグラフィの將來を予測(cè)することは困難ですが、可変フォントは確かに大きな役割を果たす可能性があります。それらの柔軟性、効率性、および創(chuàng)造的な可能性により、それらはWebデザイナーにとって強(qiáng)力なツールになります。ただし、それらの採(cǎi)用は、ブラウザのサポート、可変フォントの可用性、デザイナーのニーズとスキルに依存します。