HTML5 Canvas ドキュメントでの Web フォントの使用

Adobe Fonts の Web フォントの使用

Adobe Fonts の Web フォントを Adobe Animate の HTML5 Canvas ドキュメントで利用できるようになりました。

Adobe Fonts が Animate と統合されたことにより、品質に定評のあるフォントベンダーが提供する数千種類ものプレミアム Web フォントを HTML5 Canvas ドキュメントですぐに使用できます。

Adobe Fonts ライブラリから厳選された一部のフォントは、どのレベルの Creative Cloud プランでも使用できます。有料プランをご契約の場合は、ライブラリに登録されている数千種類に及ぶフォントをすべて使用できます。

Adobe Fonts に関するサブスクリプションプランについて詳しくは、Adobe Fonts を使用した Web フォントのホスティングを参照してください。

自己ホスト型の Web フォントとは異なり、Adobe Fonts は、ホステッドコンテンツで使用するものとして選択されたフォントをホストします。コンテンツ作成者が Adobe Fonts ライブラリからフォントを選択した後、ドキュメントを Web にパブリッシュすると、Adobe Fonts がこれらのフォントを自動的にホストし、コンテンツ作成者の Adobe Fonts アカウントを Web サイト上のコンテンツに接続します。

Adobe Fonts ライブラリは、Creative Cloud サブスクリプションの一部として利用できます。詳しくは、https://fonts.adobe.com を参照してください。新しい Adobe Fonts を購入することもできます。Animate を再起動すると、Adobe Fonts 画面の「すべてのフォント」タブに購入済みのフォントが表示されます。

HTML5 Canvas ドキュメントでの Web フォントの使用

  1. HTML5 Canvas ドキュメントを開き、ツールパネルでテキストツールを選択します。

  2. プロパティパネルでダイナミックテキストを選択し、フォントファミリードロップダウンボックスの横にある Web フォントを追加ボタンをクリックします。

  3. 表示される Web フォントを追加ウィンドウで、「利用を開始」をクリックします。

    Adobe Fonts を追加
    Adobe Fonts を追加

  4. Adobe Fonts を追加ダイアログには、ご利用の Creative Cloud サブスクリプションプランで提供されるすべての Adobe Fonts が一覧表示されます。様々なフォントをざっと閲覧したり、特定のフォントを検索したり、フォントの属性でフィルタリングしたりして、デザイン上のニーズに最も適したフォントを選択できます。

    「フィルター」をクリックすると、次のフィルターを選択できます。

    • 分類:Web フォントをセリフ、サンセリフ、スクリプトなどの分類に基づいてフィルタリングできます。
    • おすすめ:本文や見出しに適しているかどうかという基準でフォントをフィルタリングできます。
    • 書体の属性:書体の太さ、幅、高さなどの属性に基づいてフィルタリングできます。
    Adobe Fonts を追加ダイアログ
    Adobe Fonts を追加ダイアログ

  5. 使用したいフォントが見つかったら、そのフォントをクリックします。選択済みのフォントにはチェックマークが表示されます。一度に複数のフォントを選択できます。「選択したフォント」タブには、これまでに選択したすべてのフォントが表示されます。

    フォントプレビューフッターをクリックすると、細、ボールド、イタリックなどのすべてのバリエーションを表示できます。

    フォントの選択
    フォントの選択

    OK」をクリックして、選択したフォントを追加します。

    フォントファミリーメニューで選択された Web フォント
    フォントファミリーメニューで選択された Web フォント

  6. 追加された Web フォントを選択して、HTML5 Canvas ドキュメントで使用します。

    使用中のフォント
    選択したフォントをドキュメントで使用

  7. ドキュメントをパブリッシュします。

    注意:

    「ムービープレビュー」オプションで生成される出力は、プレビューのみを目的としています。最終的なデプロイ用に出力を生成するには、ファイル/パブリッシュオプションを使用します。

アドビのロゴ

アカウントにログイン