【基础教程】BI自助分析工具 - 自定义字体

2022-03-09 14:08:04 1.4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

karlkate 墨衍会员 · AI 创作全网分发关注 + 加入社区

透视表支持自定义聚合公式，新增字体管理功能，DataEase开源BI工具v2.10 LTS版本发布新增支持数据填报、血缘分析和阈值告警功能。阅读详情

引言

本文向读者介绍如何在BI自助分析工具中定义并使用自定义字体。

上传字体文件

在【资源管理】模块的【文件管理】界面上传需要用到的自定义字体文件到文件服务器，支持多种格式的字体文件，包括 .ttf 、.otf、.woff 、.woff2。

选择适当的上传目录，点击【上传文件】按钮打开上传界面：
上传字体文件，查看字体文件上传是否成功：

如上图，上传成功后在上传目录即可看到上传的字体文件，本文使用LED数字字体作为示例。

定义字体

打开BI自助分析工具设计器，在任意分析模型页面的页面全局样式中定义字体。

从设计器顶部工具栏，打开页面全局样式界面

注意：建议字体定义在分析模型的全局样式中，而不应定义到页面中的组件或分析单元中，避免重复定义和加载。
复制字体文件资源路径
从文件管理界面中复制字体文件的资源路径，复制方法如下图。
定义font-face字体

@font-face {
  font-family: 'LED';
  src: url(/fileservice/fileupload?action=download&id=951106494730964992);
}

使用复制的字体资源路径作为font-face的src值，本文以上传的LED数字字体为例。

使用自定义字体

为需要使用自定义字体的组件样式设置font-family值为全局样式中定义的字体名称。

打开组件样式编辑界面设置font-family值

注意：部分组件应用自定义字体时可能需要提高自定义字体的样式优先级，如上图添加的!important规则。

本文以【文本】组件为例。

.vbi-component-wrap {
  padding: 4px;
  overflow-y: auto;
}

.vbi-component-pnode {
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto;
  word-break: break-all;
  white-space: break-spaces;
  font-family: LED !important;
}

查看自定义字体

如图，【文本】组件现在使用自定义LED字体显示数字。

...全文

【Yonghong 企业日常问题04】永洪BI可视化工具Linux部署全攻略(部署详解版) 永洪BI可视化工具Linux部署全攻略(部署详解版) 阅读详情

karlkate

[BI]低代码自助分析开发平台 113 成员 60 内容

+ 关注 + 加入社区