フォント

レポートを作成するとき、システムにインストールされているフォントを使用できます。ただし、レポートをプレビュー、印刷、またはエクスポートする場合、これらのフォントはすべてのブラウザでサポートされているわけではありません。一般的に、ブラウザは指定されたフォントファミリ（フォントの太さ、フォントスタイル、Unicode 範囲など）を持つテキストを描画するためにフォントの「@font-face」ルールを読み込みます。HTML要素が表示されない場合、またはページ上の要素がこのフォントを使用していない場合、「@font-face」が処理されません。

CSS「@fontface」ルールを使用してブラウザのフォント読み込み処理を管理するには、追加するフォントのフォント記述子を作成してから、フォントを登録します。ビューワにフォントを登録するには、次の2つの状況があります。

状況 1: ユーザーがコードを使用してビューワにフォントをロードして登録します。
状況 2: ユーザーが、レポートをデザインする際にフォント構成 (fontsConfig.json) ファイルに追加したフォントをビューワに直接登録します。

状況 1

フォント記述子を作成する

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

locals: ブラウザがシステムディレクトリ内に検索するインストールされたフォントのフォント名を設定します（例えば、C:\Windows\Fonts、 /usr/share/fonts、など）。このプロパティにパスを指定することはできません。
source: インストールされたフォントのパスにフォントが見つからない場合は、フォントをダウンロードするのURLを設定します。このプロパティに絶対 URL (「http://…」) と相対 URL (「/…」) の両方を設定できますが、ローカルパスは設定できません。

const fonts: FontDescriptor[] = [
    {
        name: 'Noto Sans CJK JP', // フォントファミリ: "Noto Sans"
        locals: ['Noto Sans'], // リモートからロードする前に、ローカルマシンでこのフォントを見つけます
        source: 'fonts/NotoSansCJKjp-Regular.otf' // リモート URL
    },
    {
        name: 'Noto Serif CJK JP', // フォントファミリ: "Noto Serif"
        locals: ['Noto Serif', 'Arial'], // リモートからロードする前に、ローカルマシンでこのフォントを見つけます。「Noto Serif」を見つけない場合は、「Arial」が使用されます。
        source: 'fonts/NotoSerifCJKjp-Regular.otf' // リモート URL
    }
];

フォントを登録する

viewer.registerFont()を使用して、フォント記述子をビューワ(エクスポートを含む)に渡します。

const viewer = new ActiveReports.Viewer('#root');
viewer.registerFont(...fonts)
    .then(() => viewer.open('/reports/InvoiceList.rdlx-json'));

または

MESCIUS.ActiveReportsJS.Core.registerFont()を使用して、フォント記述子をPageReportに渡します。

const report = new MESCIUS.ActiveReportsJS.Core.PageReport();
MESCIUS.ActiveReportsJS.Core.registerFont(...fonts)
    .then(() => report.load('/reports/InvoiceList.rdlx-json'))
    .then(() => report.run())
    .then(document => document.print());

登録されたフォントをプリロードし、レポートの印刷プレビューにフォントを描画するについて説明します。

<head>
    <title>ActiveReportsJS Viewer</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/ar-js-viewer.css" />
    <script type="text/javascript" src="./scripts/ie-polyfills.js"></script> <!--IEで実行するために-->
    <script type="text/javascript" src="./scripts/ar-js-core.js"></script>      
    <script type="text/javascript" src="./scripts/ar-js-viewer.js"></script>
</head>
<body onload="load()">
    <script>
        var Noto_Sans = {
            name: 'Noto Sans CJK JP', 
            locals: ['Noto Sans'],
            source: 'fonts/NotoSansCJKjp-Regular.otf'
        };
        var Noto_Serif = {
            name: 'Noto Serif CJK JP',
            locals: ['Noto Serif', 'Arial'],
            source: 'fonts/NotoSerifCJKjp-Regular.otf'
        };

        var fonts = [Noto_Sans, Noto_Serif];

        function load() {
            const report = new MESCIUS.ActiveReportsJS.Core.PageReport();
            MESCIUS.ActiveReportsJS.Core.registerFont(...fonts)
                .then(() => report.load('/reports/InvoiceList.rdlx-json'))
                .then(() => report.run())
                .then(document => document.print());
        }
    </script>
</body>

ビューワで.ttcフォントファイルを登録するには、フォントの「postscriptName」プロパティを追加する必要があります。

viewer.registerFont({
    src: 'fonts/msgothic.ttc',
    name: 'MS Gothic',
    postscriptName: 'MS-Gothic'
});

状況 2

JSON ファイルにフォント記述子を追加する

ActiveReportsJSデザイナでレポートをデザインするために使用できるフォントは、フォント構成ファイル（fontsConfig.json）で定義されています。レポートをデザインするために使用するフォントを追加する方法について、フォントの追加を参照してください。

JSONファイルでフォントを登録する

デザイナにフォントを追加したら、ActiveReportsJSビューワにフォント構成ファイルを登録して同様のフォントを使用することができます。

<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.registerFont("/fonts/fontsConfig.json"); //「'fonts'」フォルダにfontsConfig.jsonを追加します
            viewer.open('/reports/InvoiceList-Fonts.rdlx-json');    
        }
    </script>
</body>

メモ

Internet ExplorerおよびEdgeブラウザはDocument.fontsをサポートされていません。しかし、一部の機能はpolyfillsを使用して実現することができます。
サポートされているフォントファイル形式は、.ttf、.otf、および .woff です (.woff2 は Internet Explorer 11 ではサポートされていません)。また、フォント名(postscriptname)を指定することで.ttcを使用できます。
ファイル形式が.tteのフォントファイルはサポートされていません。
フォントはregisterFont() メソッドにロードされます。ロードするフォントの数が多い場合は、レポートが完全に描画されるために時間がかかります。
フォントのURLが使用できない場合は、フォントはロードされません。ブラウザコンソールでメッセージを確認する必要があります。
PDFエクスポートの場合は、localsプロパティではなく、sourceプロパティを使用してフォントファイルがロードされます。
生成された CSSの「@font-face」ルールはHTMLエクスポート結果にも反映されます。ただし、「source」プロパティに設定している相対URLは動作しません。この場合は、フォントを絶対URLで登録する必要があります。
CSSの「@font-face」ルールはWebページのフォントを置き換えるので、ビューワのフォントも影響を受ける可能性があります。

フォント
状況 1
フォント記述子を作成する
フォントを登録する
状況 2
JSON ファイルにフォント記述子を追加する
JSONファイルでフォントを登録する
メモ