作成日: 2019/12/24    最終更新日: 2025/06/26

文書種別

使用方法

詳細

ActiveReportsJSのビューワと印刷機能では、CSSの@font-face規則を使用して、サーバーに配置したフォントを参照できます。これにより、クライアント環境に存在しないフォントを使用してレポートを表示・印刷することができます。

具体的な手順は以下の通りです。

1. フォントファイルを配置する

   アプリケーションのルートディレクトリ直下にfontsフォルダを作成し、フォントファイルを配置します。

   |- fonts
   |　|- font1.ttf
   |　|- font2.ttf
   |
   |- reports
   |　|- report1.rdlx-json
   |
   |- index.html（ビューワを配置しているページ）

    

2. フォント記述子を定義する

   フォント記述子は以下のプロパティで構成されます。

   name	フォント名（デザイナで設定した名称）
   source	フォントファイルのパス

   ※この方法では上記以外のプロパティを設定しません。

   ◆サンプルコード（JavaScript）

   const fonts = [
   　　{name: 'IPAゴシック', source: '/fonts/ipag.ttf'},
   　　{name: 'IPA明朝', source: '/fonts/ipam.ttf'}
   ];

   以下の形式でJSONファイル(fontsConfig.json)に保存することもできます。

   {
   　"descriptors": [
   　　{
   　　　"name": "IPAゴシック"
   　　　,"source": "/fonts/ipag.ttf"
   　　},
   　　{
   　　　"name": "IPA明朝"
   　　　,"source": "/fonts/ipam.ttf"
   　　}
   　]
   }

    

3. フォント記述子を登録する

   registerFontsメソッドを使用してフォント記述子を登録します。

   ◆サンプルコード（JavaScript）

   // コードで定義したフォント記述子を登録する場合 
   await MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(...fonts);
   
   // JSONファイルから読み込む場合
   await MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts("/fonts/fontsConfig.json");
   
   viewer.open('/reports/report1.rdlx-json')

※注意事項

この方法で利用可能なフォントファイルの形式は@font-faceの仕様に準拠します。

@font-face - CSS: カスケーディングスタイルシート | MDN

特にttc形式がサポートされていないことにご注意ください。
ttc形式のフォントはビューワ（ブラウザ）の描画には反映されません。
なお、PDFエクスポートでttc形式のフォントを埋め込むことは可能です。

関連情報

• PDFにフォントを埋め込む方法
• ビューワに表示されるフォントがデザイン時と異なる
• 外字の出力に対応していますか？
• IVS文字の出力に対応していますか？

旧文書番号

84786