見出しと

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

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

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

可変フォント：彼らは何であり、それらの使用方法

William Shakespeare

Feb 15, 2025 am 08:24 AM

可変フォント：彼らは何であり、それらの使用方法

この記事では、変数フォントを取り巻くエキサイティングな新しい可能性（Opentypeスケーラブルなフォント形式にバンドルされたエキサイティングな新しい可能性）を見ていきます。これにより、単一のフォントが複数のフォントのように動作するようになります。

キーテイクアウト

Opentypeスケーラブルフォント形式にバンドルされた変数フォントは、単一のフォントを複数のフォントのように動作させ、バリエーションがフォント自体内で定義され、フォント構造が簡素化され、パフォーマンスが向上します。

変数フォントは、標準軸を制御するためのフォントオプティックサイジング、フォントスタイル、フォントウェイト、フォントストレッチ、またはオペンタイプまたはトルエタイプの低レベル制御のためのフォント変数セッティングCSSプロパティを使用して実装できます。フォントのバリエーション。

パフォーマンスは可変フォントの重要な利点であり、単一のフォントファイルがさまざまなウェイトを作成できるため、ページの重みを大幅に削減できます。 Woff2ファイル形式は、これらのフォントをさらに圧縮し、パフォーマンスの追加の利点を提供できます。可変フォントのブラウザサポートはまだ制限されており、変数フォントをサポートしないブラウザーにはフォールバックを使用する必要がある場合があります。これには、非変動フォントの提供、またはオペレーティングシステムフォントフォールバックの使用が含まれます。
Webブラウザーの進化、Netscape Navigatorのタグなどのイノベーション、および最初のCSS仕様により、Webページはフォントが表示されたものを制御することができました。ただし、これらのフォントはユーザーのコンピューターにインストールする必要がありました。 1998年、CSSワーキンググループは、 @font-faceルールのサポートを提案して、あらゆる書体をWebページでレンダリングできるようにしました。 IE4はテクノロジーを実装しましたが、すべてのユーザーのブラウザへのフォントの配布により、ライセンスと著作権侵害の問題が発生しました。

フォントのダウンロードが実行可能になったのは、2012年にCSS3フォントモジュールの到着まででした。実装すると、Webページによってダウンロードされたフォントは、そのページでのみ使用でき、オペレーティングシステムにはコピーされません。フォントのダウンロードにより、リモートフォントをダウンロードしてブラウザによって使用できます。つまり、Webデザイナーはユーザーのコンピューターにインストールされていないフォントを使用できるようになりました。 Webデザイナーが使用したいフォントを見つけたとき、彼らはWebサーバーにフォントファイルを含める必要があり、必要に応じてユーザーに自動的にダウンロードされます。これらのフォントは、 @font-faceルールを使用して参照されました

変数フォント

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

ログイン後にコピー

このテクノロジーにより、単一のフォントが複数のフォントのように動作することができます。フォント内のバリエーションを定義することで行われます。これらのバリエーションは、各キャラクターには1つのアウトラインしかないという事実に由来しています。このアウトラインを構築するポイントには、それらがどのように振る舞うべきかについての指示があります。複数のフォントウェイトを定義する必要はありません。これは、非常に狭い定義と非常に広い定義の間で補間することができるためです。これにより、たとえばセミボールドや太字など、スタイルを生成することもできます。これらのバリエーションは、フォントの1つ以上の軸に沿って作用する場合があります。下の画像には、文字Aのこの概要補間の例を示します。

なぜ変数フォントが関連しているのか？

変数フォントは、両方のシンプルさをフォント構造とパフォーマンスの改善にもたらすことができます。たとえば、当社のウェブサイトに5つのフォントスタイルが必要な状況を考えてみましょう。 5つの異なるフォントファイルをロードする必要があるよりも、これらの5つのスタイルをレンダリングできる単一の変数フォントを提供することは、大幅に小さく、より速くなります。可変フォントを使用して

現在、変数フォントを使用する2つの異なる方法があります。まず、それらを実装する最新の方法を見ていきます。 CSS仕様は、標準軸のいずれかを制御するためのフォントオプティックサイズ、フォントスタイル、フォントウェイト、フォントストレッチを使用して強く好みます。

font-optical-sizing

このプロパティにより、開発者は、さまざまなサイズでの表示を最適化するために、わずかに異なる視覚表現でテキストをレンダリングするかどうかを開発者が制御できます。ブラウザがグリフの形状を変更できない場合、またはできる限り自動化できない場合のために、価値を必要としません。フォントオプティカルサイズをサポートするブラウザでは、値が自動に設定されているフォントは、以下の画像のフォントのように異なる場合があります。

可変フォント：彼らは何であり、それらの使用方法 noneに設定されていない場合、フォントにバリエーションはありません。

font-style

このプロパティは、フォントがフォントファミリーから通常、イタリック、または斜めの顔でスタイリングする必要があるかどうかを指定します。通常の値、斜体、または斜めの値をとることができます。

font-weight

このプロパティは、フォントの重量（または大胆さ）を指定します。注意すべきことの1つは、通常のフォントを使用すると、名前付きインスタンスを定義できることです。たとえば、太字はfont-weight：700またはexrice-lightはfont-weightと同じです。極性、私たちはより細かい粒度を持つことができます。たとえば、font-weight：200.01のような値が可能になりました。

font-stretch

このプロパティは、フォントから通常、凝縮、または拡張された顔を選択します。 Font-Weightプロパティと同様に、それは延々継続または通常のような名前のインスタンスであるか、0％から100％の割合にすることができます。また、名前付きインスタンスは既知のパーセンテージにマッピングされます。たとえば、余分なコンデンスは62.5％にマッピングされます。

この例では、単一の

見出しと

段落を備えた非常にシンプルなページを作成しました。 CodepenのSitePoint（@SitePoint）のペン変数フォントHTMLを参照してください。

現在、私たちのスタイルのないウェブページは次のようになります：

変数フォントを使用するには、適切なファイルを見つける必要があります。 V-Fontsプロジェクトには、すべてのタイプの変数フォントを検索および実験できるフォントリポジトリが提供されます。 Avenirnextフォントを使用して、公式のGitHubページからリンクすることにしました。

その後、この新しいフォントをロードするにはCSSファイルを作成する必要があります：

可変フォント：彼らは何であり、それらの使用方法 CodepenのSitePoint（@SitePoint）でペンロードされた変数フォントを参照してください。

ブラウザのサポートの問題により、この例ではSafariとChromeのフォントバリエーションのみを適用します。

可変フォント：彼らは何であり、それらの使用方法フォントがロードされた状態で、フォントウェイトプロパティを使用して、可変フォントの重量軸を操作できるようになりました。

codepenのSitePoint（@sitepoint）によるペンSourcesans変数フォントを参照してください。

ほとんどの場合、2つの異なるフォントファイルも必要です。1つはイタリック用、もう1つは通常のフォント（ローマ）です。これは、これらのフォントの構築が根本的に異なる可能性があるために起こります。 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>

ログイン後にコピー

変数フォントを使用する2番目の方法は、フォント変動セッティングCSSプロパティを使用することです。このプロパティは、変動値とともに変化する機能の4文字の軸名を指定することにより、OpenTypeまたはTrueTypeフォントのバリエーションを制御するために導入されました。現在、フォントの次の側面にアクセスできます。

WGHT - 重量、これはフォントウェイトCSSプロパティと同一です。値は1から999になります

wdth - 幅。これは、フォントストレッチCSSプロパティと同じです。キーワードまたはパーセンテージ値を取ることができます。この軸は通常、フォントデザイナーによって定義され、エレガントに拡張または凝縮します。

opsz - 光学サイジング。これは、フォントオプティカルサイズのプロパティを使用してオンとオフにすることができます。

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

slnt - スラント。これは、フォントスタイルのCSSプロパティが斜めに設定されているときに同一です。デフォルトは20度の傾斜になりますが、-90DEGと90DEGの間で指定された程度を受け入れることもできます。

仕様によると、このプロパティは、Opentypeフォント機能を有効またはアクセスする他の方法が存在する特別なケースを処理するように設計された低レベルの機能です。そのため、代わりに @font-faceを使用しようとする必要があります。

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

ログイン後にコピー

パフォーマンス

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

しかし、さらに進むことができます。フォント形式について話したとき、Woff2ファイルは本質的に追加の圧縮を備えたTTFファイルであると述べました。 Woff2ファイルは、カスタム前処理と圧縮アルゴリズムを使用して、他の形式で約30％のファイルサイズ削減を提供するため、小さいです。

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

ツールの公式GitHubページでは、それに関するすべての情報を見つけることができます。 UNIX環境にインストールするには、次のコマンドを使用できます。

インストールした後、以下を使用して変数フォントファイルを圧縮するために使用できます。

そして、ファイルサイズを半分にした42kbのファイルになります。このファイルを使用するには、この新しいファイルに対応するために、ソースのファイルとその形式を変更するだけです。

<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形式の唯一の欠点は、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）、そうでないものが見つかった場合がある場合があります。 >

これを回避するには、これらのブラウザのために変数を提供するか、オペレーティングシステムフォントフォールバックを使用する必要があります。可変フォントをサポートする

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

ログイン後にコピー

ブラウザは、フォーマット（「woff2variations '）としてマークされたファイルをダウンロードしますが、形式（' ttf '）としてマークされたシングルスタイルフォントをダウンロードしないブラウザー。これは、各ルールの変数への参照を繰り返すことができるため可能です。最初の障害が発生した場合、2番目はロードされます。次のように：

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

codepenのSitePoint（@SitePoint）によるペン複数のフォントを参照してください。

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

Firefoxなどの変数フォントをサポートしないブラウザでは、2番目のフォントがロードされ、結果は次のようになります。

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

ログイン後にコピー

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

結論

数年前から利用可能であるにもかかわらず、可変フォントはまだ初期段階にあります。ブラウザのサポートは不足しており、選択できるフォントはほとんどありません。ただし、可能性は膨大であり、可変フォントは開発を簡素化しながら、より良いパフォーマンスを可能にします。たとえば、SitePoint独自のフロントページは現在、合計273kbの8つのフォントファイルをロードしています。可変フォントは、この依存関係を削減し、ページの重みをさらに削減できます。可変フォントに関するよくある質問（FAQ）

変数フォントを使用することの利点は何ですか？

変数フォントは、従来のフォントよりもいくつかの利点を提供します。まず、単一のフォントファイルから幅広いバリエーションを提供します。これにより、ファイルのサイズを大幅に削減し、Webサイトの読み込み速度を改善できます。これは、データプランが限られている可能性のあるモバイルユーザーにとって特に有益です。第二に、可変フォントにより、より創造的で応答性の高いデザインが可能になります。デザイナーは、フォントの重量、幅、スラント、その他の属性を調整して、ユニークでダイナミックな視覚体験を作成できます。最後に、変数フォントは、特に小さな画面や低解像度デバイスでテキストの読みやすさを向上させることができます。フォントレンダリングの細かい調整を可能にすることにより。 > CSSに変数フォントの実装には、いくつかのステップが含まれます。まず、 @font-faceルールを使用して変数フォントファイルをインポートする必要があります。次に、「Font-Variation-Settings」プロパティを使用して、フォントのバリエーションを調整できます。たとえば、「Font-Variation-Settings：「WGHT」700;」は、フォントの重量を700に設定します。

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

今のところ、Chrome、Firefox、Safari、Edgeなどのほとんどの最新のブラウザは、変数フォントをサポートしています。ただし、これらのブラウザの古いバージョンとあまり一般的でないブラウザは、それらをサポートしていない場合があります。可変フォントの特定のブラウザサポートをチェックし、サポートされていないブラウザにフォールバックフォントを提供することをお勧めします。。 Googleフォントでフォントを選択すると、「変数」オプションを選択して変数フォントバージョンをダウンロードできます。その後、CSSの「フォント変数セッティング」プロパティを使用して、フォントのバリエーションを調整できます。

人気のある変数フォントは何ですか？

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