[]
示例 参考文档 主题编辑器 API文档
立即试用
(Showing Draft Content)

字体配置

所有ActiveReportsJS组件都基于Web浏览器环境来运行。

通常情况下，报表由文本内容组成，浏览器通过使用glyphs来渲染的字体形状。字体资源包含将字符编码映射到代表这些字符的字形的信息。因此，浏览器需要访问字体资源，才能够按照预期显示文本。


ActiveReportsJS 中的所有文本项都具有几种字体属性，包括

  • 字体: 字体ID 如 Arial， Calibri， 或 Times New Roman

  • 字体样式: 正常 或 斜体

  • 字体粗细: 较细，细体，正常，适中，粗体，较粗

这三个属性的独特组合称为“字体”。字体系列通常由多个字体组成，通常由单独的文件表示。例如，以下是Windows 系统中Arial字体系列文件夹的屏幕截图：




当 ActiveReportsJS 渲染报表时，它将这些字体属性翻译成font-family, font-style、font-style 和 font-weight 和font-weightCSS样式属性，并依靠浏览器来解析相关的字体资源，提取所需的字形。浏览器有两种方式来访问字体资源它们可能安装在浏览器运行的系统中，也可能是可下载的。


使用可下载的字体资源易于维护；所有浏览器都支持它，并且它保证了在所有环境中文本内容的一致输出。此外，ActiveReportsJS PDF 导出需要注册字体，因为它将其子集嵌入到PDF文档中。因此，确保所有环境中报表输出一致的最佳方法是配置ActiveReportsJS组件以访问可下载的字体资源。本文提供了实现该目标的分步指南。


首先，决定在报表中使用哪些字体系列。它可以是标准字体，如Arial、Times New Roman或Helvetica。也可以是一种或多种网络字体。我们在演示网站示例报表中使用 Montserrat 字体。在任何情况下，请确保你拥有字体的所有文件。ActiveReportsJS支持以下字体格式。

字体格式

文件扩展名

注意

WOFF 1.0 (Web 开放字体格式)

*.woff


WOFF 2.0 (Web 开放字体格式)

*.woff2

IE11 不支持

TrueType

*.ttf


OpenType

*.ttf, *.otf


配置桌面设计器字体

您可以在以下位置找到独立的报表设计器字体配置。

  • Windows : C:\Users\<当前用户名>\AppData\Roaming\ActiveReportsJS Designer

  • MacOS: ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json

  • Linux: ~/.config/ActivereportsJS Designer/fontsConfig.json

创建 Fonts文件夹，并将所有需要的字体资源文件拷贝到该文件夹下面。


然后打开 fontsConfig.json 文件 ，该文件包含报表文本内容的涉及的字体描述符。在 path 属性中, 指定到Fonts目录的父文件夹的绝对路径。替换 descriptors 默认项。每个描述符都包含以下属性：

属性名称

描述

注意

name

字体名称

"Arial" 或 "Times New Roman"

style

字体样式

"normal" 或 "italic"

weight

字体粗细

建议使用100到900之间的数值。 参考 CSS 说明

source

字体文件的相对路径

例如, "Fonts/Calibri/calibri.ttf"

例如, 使用 Montserrat 字体, 可以添加以下信息

fontsConfig.json中"descriptors" 字段示例

{
    "name": "Montserrat",
    "weight": "100",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-Thin.ttf"
},
{
    "name": "Montserrat",
    "weight": "100",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-ThinItalic.ttf"
},
{
    "name": "Montserrat",
    "weight": "200",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-ExtraLight.ttf"
},
{
    "name": "Montserrat",
    "weight": "200",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-ExtraLightItalic.ttf"
},
{
    "name": "Montserrat",
    "weight": "300",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-Light.ttf"
},
{
    "name": "Montserrat",
    "weight": "300",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-LightItalic.ttf"
},
{
    "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": "500",
    "source": "Fonts/Montserrat/Montserrat-Medium.ttf"
},
{
    "name": "Montserrat",
    "weight": "500",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-MediumItalic.ttf"
},
{
    "name": "Montserrat",
    "weight": "600",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-SemiBold.ttf"
},
{
    "name": "Montserrat",
    "weight": "600",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-SemiBoldItalic.ttf"
},
{
    "name": "Montserrat",
    "weight": "700",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-Bold.ttf"
},
{
    "name": "Montserrat",
    "weight": "700",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-BoldItalic.ttf"
},
{
    "name": "Montserrat",
    "weight": "800",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-ExtraBold.ttf"
},
{
    "name": "Montserrat",
    "weight": "800",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf"
},
{
    "name": "Montserrat",
    "weight": "900",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-Black.ttf"
},
{
    "name": "Montserrat",
    "weight": "900",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-BlackItalic.ttf"
}

运行桌面设计器应用程序，在报表中添加一个文本框，并确保能将字体属性设置为在fontsConfig.json文件中列举的字体之一，并且所有的字体都能正确显示。

配置基于 ActiveReportsJS 的应用程序

在报表Viewer中显示报表，将报表导出为PDF或托管报表设计器组件的应用程序应使用与为独立设计器应用程序创建的配置相同的配置。

最简单的方式是复制Fonts 文件夹和 fontsConfig.json 文件到项目的 assets 文件夹下面. 此文件夹因不同的前端框架而异。 v 示例如下:

{
    "name": "Montserrat",
    "weight": "900",
    "style": "italic",
    "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf"
}

  • Vue框架是放置在 静态 Assets文件处理

    最后，该应用程序，应该调用 FontStore 的registerFonts 方法 ，来加载fontsConfig 文件。

    该代码需要在应用程序开始展示或导出报表之前执行。注意 registerFonts 方法是个异步函数，并会返回 Promise 对象。 也可以，调用此方法的代码可以等待，直到返回Promise结果后，再在查看器组件中加载报表或导出报表。

纯 JavaScript 代码示例：

<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js"></script>
<script>
  GC.ActiveReports.Core.FontStore.registerFonts(
    "/resources/fontsConfig.json" // replace the URL with the actual one
  )
</script>

Angular，React和Vue代码示例：

import { Core } from "@grapecity/activereports";
Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one

详细代码可参考 在线示例.

配置 Web 报表设计器

为确保报表设计器组件仅显示注册的字体， 设置 设计器实例的fontSet 属性 为registered.

相关资源