字体在 应用程序和基于 Web 的报告的视觉表示中发挥着重要作用。默认情况下，JavaScript 允许开发人员自定义字体大小、粗细和样式等内容，甚至包括自定义字体类型。开发人员使用和自定义字体的能力使他们能够增强所呈现信息的美观性和可读性。 JavaScript 为了匹配 JavaScript 的灵活性，ActiveReportsJS 允许用户大量自定义报表中的文本。在本文中，我们将重点介绍如何利用 ActiveReportsJS Designer 自定义字体的功能，涵盖以下主题： 字体基础知识 配置独立设计器应用程序 配置基于 ActiveReportsJS 的应用程序 配置报表设计器组件 字体基础知识 所有 ActiveReportsJS 组件都在 Web 浏览器环境中运行：   是用 构建的，它使用 Chromium 来显示用户界面。 独立报表设计器 Electron   和 组件是在用户计算机上的浏览器中运行的 Web 应用程序的一部分。 JavaScript 报表查看器 设计器  PDF、表格数据和 HTML 导出过滤器使用 Web 浏览器环境来衡量报告内容。 典型的报告由浏览器使用称为字形的形状呈现的文本内容组成。字体资源包含将字符代码映射到表示这些字符的字形的信息。因此，浏览器需要访问字体资源才能按预期显示文本。  ActiveReportsJS 中的所有文本内容都有多个字体属性，包括： ：字体 ID，即 Arial、Calabri 或 Times New Roman。 字体系列 ：正常或斜体。 字体样式 ：细、超细、正常、中、半粗体、粗体、超粗体、粗体。 字体粗细 这三个属性的独特组合称为  。字体系列通常由多个字体组成，这些字体（通常）由多个文件表示。 Font Face 例如，  字体系列有六种不同的字体：  Calibri 当 ActiveReportsJS 呈现报表时，它将这些字体属性转换为 font-family、font-style 和 font-weight CSS 样式属性。它依靠浏览器来解析关联的字体资源并提取所需的字形。浏览器有两种方式访问字体资源；本地、在浏览器运行的系统上或通过下载。 可下载字体资源，易于维护；所有现代浏览器都支持它们，并且它保证了在所有环境中文本内容的一致输出。此外，ActiveReportsJS PDF Export 需要可下载字体，因为它将字体子集嵌入 PDF 文档中。因此，确保所有环境中报表输出一致的最佳方法是配置 ActiveReportsJS 组件来访问可下载的字体资源。 在开始之前，我们需要决定要在报告中使用哪些字体系列。它可以是标准字体，如 Arial、Times New Roman 或 Helvetica。或者，它可以是任意数量的网络字体。对于我们的示例，我们将使用 Montserrat 字体；这与我们用于演示报告的字体相同。 无论如何，请确保您拥有计划使用的所有字体系列的所有字体文件。 ActiveReportsJS 支持以下字体格式：  配置独立报表设计器 要将字体系列添加到独立设计器，您首先需要导航到包含 ActiveReportsJS 字体配置文件的文件夹。根据您的操作系统，它们位于以下位置：    ：%AppData%\ActiveReportsJS Designer\fontsConfig.json Windows    ：~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json macOS    ：~/.config/ActivereportsJS Designer/fontsConfig.json Linux 在此位置，创建一个名为 的文件夹，并将您计划使用的所有字体的所有文件复制到此文件夹中。 Fonts 然后，在您选择的文本编辑器中打开 文件。此文件包含报表作者将用于文本内容的字体竞赛描述符。在 属性中，指定 目录的父文件夹的绝对路径。将描述符数组的默认项替换为所需字体的描述符。 fontsConfig.json 路径 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，并确保可以将其 属性设置为 文件中枚举的字体之一，并且所有字体均正确显示。 Font Family fontsConfig.json 配置基于 ActiveReportsJS 的应用程序 在 JavaScript 报表查看器中显示报表、将报表导出为 PDF 或托管报表设计器组件的应用程序应使用为独立设计器应用程序创建的相同配置。实现此目的的最简单方法是将 文件夹和 文件复制到应用程序的静态资产文件夹。 Fonts fontsConfig.json 对于不同的前端框架，该文件夹有所不同。这里有一些例子：    ：使用资产配置；如果将 文件夹和 文件复制到assets文件夹中，请修改 文件中字体描述符的源属性，以便它们以assets开头。例如： Angular Fonts fontsConfig.json fontsConfig.json  {“名称”：“Montserrat”，“权重”：“900”，“风格”：“斜体”，“来源”：“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.

Learn More About MESCIUS' Line of Products!

該音頻是用故事的原始語言製作的！

在 JavaScript 报告中使用自定义字体

About Author

註釋

標籤

这篇文章刊登在

Related Stories

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

从论坛到信息流：社交媒体算法如何塑造数字互动

看不见的层面：为什么用户访谈是不可替代的资产

比特币 UTXO 模型，为独特的生态系统提供动力

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

从论坛到信息流：社交媒体算法如何塑造数字互动

看不见的层面：为什么用户访谈是不可替代的资产

比特币 UTXO 模型，为独特的生态系统提供动力

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps