AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
自定义设计

自定义字体

想在信息图中使用品牌或特色字体,可按以下步骤:

  1. 部署字体或者使用已有字体资源,部署方式可参考:字体分包部署与使用
  2. 使用 registerFont 注册字体。
  3. 在主题配置中通过配置 font-family 使用注册的字体。

以下为示例代码:

JS
import {registerFont, Infographic} from '@antv/infographic'; registerFont({ fontFamily: 'Alibaba PuHuiTi', name: '阿里巴巴普惠体', baseUrl: 'https://assets.antv.antgroup.com/AlibabaPuHuiTi-Regular/result.css', fontWeight: {regular: 'regular'}, }); const infographic = new Infographic({ // 其他配置项... }); infographic.render(` theme base text font-family Alibaba PuHuiTi # 配置全局字体 item label font-family Alibaba PuHuiTi # 仅配置数据项标题字体 `);

建议确保字体 CDN 支持跨域与缓存,这样渲染更稳定、加载更快。

Previous自定义色板
Next自定义资源加载器

AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7
JS
import {registerFont, Infographic} from '@antv/infographic';

registerFont({
fontFamily: 'Alibaba PuHuiTi',
name: '阿里巴巴普惠体',
baseUrl: 'https://assets.antv.antgroup.com/AlibabaPuHuiTi-Regular/result.css',
fontWeight: {regular: 'regular'},
});

const infographic = new Infographic({
// 其他配置项...
});

infographic.render(`
theme
base
text
font-family Alibaba PuHuiTi # 配置全局字体
item
label
font-family Alibaba PuHuiTi # 仅配置数据项标题字体
`);