メインコンテンツにスキップ

スタイルリンク

スタイルリンクとその使用方法について学ぶ

Supriya Bisht avatar
対応者:Supriya Bisht
昨日アップデートされました

スタイルリンクとは、フォントスタイルごとに異なるフォントファミリー名を使用するかわりに、同一のフォントファミリー名にリンクされた複数のスタイルに対する font-face 宣言を使用することです。

本セクションでは、以下の点について説明します。


Web プロジェクトとデジタル広告とは?

Web プロジェクト

Web プロジェクトは、ライブラリを整理するためのツールで、フォントの Web フォントフォーマットへアクセスしたり、それらを 1 つの場所でグループ化したりすることができます。

Web プロジェクトの詳細については、こちらをクリックしてください。

デジタル広告

Web プロジェクトと同様、Monotype Fonts のデジタル広告は、フォントライブラリの整理や、HTML5 広告で使用する Web フォントの準備のためのグルーピングオプションです。

デジタル広告の詳細については、こちらをクリックしてください。


CSS で Web フォントを定義するさまざまな方法

CSS で Web フォントを定義する方法は 2 つあります。

  1. ファミリーにリンクされた Web フォント定義。font-face プロパティ内の記述子を使用し、特定のフォントファミリーの内の、使用するフォントスタイルの詳細を指定します。これは現在の業界標準です。

  2. 個々の Web フォントの定義。ファミリー内の個々の Web フォントごとに個別の font-face 定義を行います。


既存のデジタルアセットにスタイルリンクを設定する方法

  1. https://enterprise.monotype.com/ にアクセスします。

  2. Monotype Fonts Web プラットフォームにログインします。

  3. My Library(マイライブラリ)]をクリックし、左のパネルからデジタルアセットを選択します。

    選択されたアセットについて Monotype Fonts でスタイルリンクが利用可能になったことを示すバナーが表示されます。これは、アセットが従来方式のスタイルリンクを使用しているためです。

    A screenshot of a computer

AI-generated content may be incorrect.

  4. 縦の三点リーダーアイコン()をクリックし、ドロップダウンメニューから[Duplicate(複製)]を選択します。アセットが複製されます。

    注記:デジタルアセットを複製するには、編集権限または共同オーナー権限が必要です。

    この操作を行うことによって、リンクされたスタイルの埋め込みコードが新しいフォーマットでコピーされ、「This web project/digital ad follows style linking.(この Web プロジェクト/デジタル広告はスタイルリンクに準拠しています)」という新しいバナーが表示されます。

  5. </> Embed Code(埋め込みコード)]をクリックして、その Web プロジェクトのフォントスタイルを表示し、すべての CSS 要素をコピーします。

    A screenshot of a web project

AI-generated content may be incorrect.

    注記:当社は、軽量な JavaScript と CSS の実装に切り替えることで、Web フォントのページビューのトラッキング機能の向上を実現しました。ページ読み込み時間の短縮、よりスムーズな体験実現のために、従来の CSS よりもこちらを使用することをお勧めします。


新しいスタイルリンクの埋め込みコードと以前のものとの違い

以前は、ページビュートラッキングは同期的に実装されていました。現在は、Web サイトの速度を損なうことなく Web フォントのページビューのトラッキングを行える、より効率的かつ軽量な JavaScript と CSS のソリューションへと移行しています。この変更により、読み込み時間の短縮とスムーズな体験が実現されています。

引き続き以前の実装をご利用いただくこともできますが、パフォーマンスの向上をお求めの場合は、非同期の JavaScript + CSS アプローチをご選択ください。

旧スタイルリンク

A screenshot of a web project

AI-generated content may be incorrect.

新スタイルリンク

A screenshot of a web project

AI-generated content may be incorrect.


既存のユーザーが、新しい非同期 JavaScript + CSS アプローチを活用する方法

最新の実装は新しく作成された Web アセット専用であるため、既存のユーザーは古い CSS 埋め込みコードにのみアクセスできます。ただし、フォントの追加や削除、サブセット化、または複製など、Web プロジェクトの更新を行うことで、新しいアプローチをご利用いただけます。


お勧めのコンテンツ

こちらの回答で解決しましたか?