フォント登録

ActiveReportsJSは、クライアント側でレポートを実行、エクスポート、および印刷します。これは、コードがさまざまなプラットフォーム、環境、およびブラウザで実行されることを意味します。レポートでテキストの書式設定に非標準のフォント（Google Fontsなど）を使用している場合、このレポートを実行、エクスポート、または印刷する一部の環境では、このフォントが使用できない可能性があります。

この問題を解決するために、ActiveReportsJSでは、アプリケーション内で使用されるレポートのフォントを登録するためのAPIが提供されています。

フォントを登録するための基本的な方法はFontDescriptorです。以下は、Robotoフォントを定義するFontDescriptorインスタンスのサンプルです。

const robotoFont = {
  name: "Roboto",
  source:
    "https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzI.woff2",
};

FontStoreオブジェクトのregisterFontメソッドは、次のようにフォント記述子オブジェクトを受け取り、指定されたフォントを登録します。

import { Core } from "@mescius/activereportsjs";

await Core.FontStore.registerFonts(robotoFont);

上記のコードは、カスタムフォントを使用しているレポートをプレビュー、エクスポート、または印刷する前に実行する必要があります。

メモ

• サポートされているフォントファイル形式は、.ttf、.otf、および .woff です (.woff2 は Internet Explorer 11 ではサポートされていません)。

• EdgeブラウザはDocument.fontsをサポートされていません。しかし、一部の機能はpolyfillsを使用して実現することができます。

• フォントのURLが使用できない場合は、フォントはロードされません。ブラウザコンソールでメッセージを確認する必要があります。

• 生成された CSSの「@font-face」ルールはHTMLエクスポート結果にも反映されます。ただし、「source」プロパティに設定している相対URLは動作しません。この場合は、フォントを絶対URLで登録する必要があります。

• CSSの「@font-face」ルールはWebページのフォントを置き換えるので、ビューワのフォントも影響を受ける可能性があります。

• ファイル形式が.tteのフォントファイルはサポートされていません。

関連トピック

• エクスポート

• 印刷