フォントは、 アプリケーションや Web ベースのレポートの視覚的表現において大きな役割を果たします。デフォルトでは、JavaScript を使用すると、開発者はフォント サイズ、太さ、スタイルなどをカスタマイズしたり、カスタム フォント タイプを含めたりすることができます。開発者はフォントを操作およびカスタマイズできるため、表示する情報の美しさと読みやすさの両方を向上させることができます。 JavaScript JavaScript の柔軟性に合わせて、ActiveReportsJS を使用すると、ユーザーはレポート内のテキストを大幅にカスタマイズできます。この記事では、ActiveReportsJS デザイナーのフォントをカスタマイズする機能を活用する方法に焦点を当て、次のトピックについて説明します。 フォントの基本 スタンドアロン デザイナー アプリケーションの構成 ActiveReportsJS ベースのアプリケーションの構成 レポート デザイナー コンポーネントの構成 フォントの基本 すべての ActiveReportsJS コンポーネントは、Web ブラウザ環境内で動作します。 、Chromium を使用してユーザー インターフェイスを表示する で構築されています。 スタンドアロン レポート デザイナーは Electron および コンポーネントは、ユーザーのマシン上のブラウザで実行される Web アプリケーションの一部です。 JavaScript レポート ビューア デザイナー PDF、表形式データ、および HTML エクスポート フィルターは、Web ブラウザ環境を使用してレポート コンテンツを測定します。 一般的なレポートは、ブラウザがグリフと呼ばれる形状を使用してレンダリングするテキスト コンテンツで構成されます。フォント リソースには、文字コードをこれらの文字を表すグリフにマップする情報が含まれています。したがって、テキストを期待どおりに表示するには、ブラウザーがフォント リソースにアクセスする必要があります。 ActiveReportsJS のすべてのテキスト コンテンツには、次のようないくつかのフォント プロパティがあります。 : フォント ID、つまり Arial、Calabri、または Times New Roman。 フォント ファミリー : 標準または斜体。 フォント スタイル ：細、極軽、標準、中、半太字、太字、極太、太。 フォントの太さ これら 3 つのプロパティの一意の組み合わせは、 と呼ばれます。フォント ファミリは通常、複数のフォント フェイスで構成されており、それらは (通常は) 複数のファイルで表されます。 Font Face たとえば、 フォント ファミリには 6 つの異なるフォントフェイスがあります。 Calibri ActiveReportsJS はレポートを表示するときに、これらのフォント プロパティを font-family、font-style、および font-weight CSS スタイル プロパティに変換します。ブラウザーに依存して、関連するフォント リソースを解決し、必要なグリフを抽出します。ブラウザにはフォント リソースにアクセスする 2 つの方法があります。ローカル、ブラウザが実行されるシステム上、またはダウンロードによって。 ダウンロード可能なフォント リソースは保守が簡単です。最新のブラウザはすべてこれらをサポートしており、すべての環境で一貫したテキスト コンテンツの出力が保証されます。さらに、ActiveReportsJS PDF エクスポートでは、フォントのサブセットが PDF ドキュメントに埋め込まれるため、ダウンロード可能なフォントが必要です。したがって、すべての環境で一貫したレポート出力を保証する最善の方法は、ダウンロード可能なフォント リソースにアクセスするように ActiveReportsJS コンポーネントを構成することです。 始める前に、レポートに使用するフォント ファミリを決定する必要があります。 Arial、Times New Roman、Helvetica などの標準フォントを使用できます。または、任意の数の Web フォントを使用することもできます。この例では、Montserrat フォントを使用します。これはデモ レポートで使用しているのと同じフォントです。 いずれの場合も、使用する予定のすべてのフォント ファミリのすべてのフォント フェイス ファイルがあることを確認してください。 ActiveReportsJSは次のフォント形式をサポートしています。 スタンドアロン レポート デザイナーの構成 スタンドアロン デザイナーにフォント ファミリを追加するには、まず ActiveReportsJS フォント構成ファイルが保存されているフォルダーに移動する必要があります。これらは、オペレーティング システムに応じて次の場所にあります。 : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows : ~/ライブラリ/アプリケーション サポート/ActiveReportsJS デザイナー/fontsConfig.json macOS : ~/.config/ActivereportsJS デザイナー/fontsConfig.json Linux この場所に という名前のフォルダーを作成し、使用する予定のすべてのフォント フェイスのすべてのファイルをこのフォルダーにコピーします。 Fonts 次に、選択したテキスト エディターで ファイルを開きます。このファイルには、レポート作成者がテキスト コンテンツに使用するフォント レースの記述子が含まれています。 プロパティには、 ディレクトリの親フォルダーへの絶対パスを指定します。記述子配列のデフォルト項目を、目的のフォントフェイスの記述子に置き換えます。 fontsConfig.json path Fonts 各記述子には次のプロパティが含まれます。 たとえば、 フォントの標準、斜体、および太字を許可するには、次の記述子を使用します。 Montserrat { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" } スタンドアロン デザイナー アプリケーションを実行し、レポート本文に TextBox を追加し、その プロパティを ファイルで列挙したフォントの 1 つに設定できること、およびすべてのフォント フェイスが正しく表示されていることを確認します。 Font Family fontsConfig.json ActiveReportsJS ベースのアプリケーションの構成 JavaScript レポート ビューアでレポートを表示するアプリケーション、レポートを PDF にエクスポートするアプリケーション、またはレポート デザイナー コンポーネントをホストするアプリケーションは、スタンドアロン デザイナー アプリケーション用に作成したのと同じ構成を使用する必要があります。これを実現する最も簡単な方法は、 フォルダーと ファイルをアプリケーションの静的アセット フォルダーにコピーすることです。 Fonts fontsConfig.json このフォルダーは、フロントエンド フレームワークごとに異なります。以下にいくつかの例を示します。 : アセット構成を使用します。 フォルダーと ファイルがアセット フォルダーにコピーされている場合は、 ファイル内のフォント記述子のソース プロパティを変更して、アセットで始まるようにします。例えば： Angular Fonts fontsConfig.json fontsConfig.json { "name": "Montserrat"、"weight": "900"、"style": "italic"、"source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" } : create-react-app で作成されたアプリケーションにパブリック フォルダーを使用します。 React : 静的アセット処理を使用します。 Vue 最後に、アプリケーションは、 ファイルの URL を指定して FontStore オブジェクトの メソッドを呼び出す必要があります。このコードは、アプリケーションがレポートの表示またはエクスポートを開始する前に実行する必要があります。 メソッドは非同期であり、 オブジェクトを返すことに注意してください。 fontsConfig registerFonts registerFonts Promise このメソッドを呼び出すコードは、レポートをビューア コンポーネントにロードするかエクスポートする前に、返された Promise が解決されるまで待機することもできます。 純粋な JavaScript アプリケーションの場合、コードは次のようになります。 <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script> 、 、および Vue アプリケーションの場合: Angular React import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one このコードの例は、 で見つけることができます。 ライブ デモ レポート デザイナー コンポーネントの構成 最後に、レポート デザイナー コンポーネントが登録されたフォントのみを表示するようにするには、デザイナー インスタンスの プロパティを登録済みに設定します。 fontSet さらに、新しく追加されたレポート アイテムに登録済みフォントのいずれかがデフォルトで確実に含まれるようにしたい場合は、 機能を使用できます。 カスタム初期テンプレート 結論 以上で、この記事は終わりです。これまで説明したように、フォントは開発者にとって美しさと読みやすさを向上させる強力な方法です。この記事では、ActiveReportsJS レポート デザイナーおよびビューアーを使用してカスタム フォントをレポートに簡単に組み込むことができることを説明しました。 コーディングを楽しんでください! でも公開されています。 ここ

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

このオーディオは、ストーリーの元の言語で制作されています。

JavaScript レポートでのカスタムフォントの使用

長すぎる; 読むには

@grapecity

Credibility

関連ストーリー

JavaScript レポートでのカスタム フォントの使用

長すぎる; 読むには

@grapecity

Credibility

関連ストーリー

JavaScript レポートでのカスタムフォントの使用