1.需求背景
...
客户页面整体配色做了修改，目前 “文件夹” 适配的图标是UI设计好的，运维人员修改 “文件夹” 只能从本地上传，运维起来很不方便。
2.功能说明
允许通过扩展包的方式把字体上传到应用服务器上，方便更新和维护。
生效资源：交互式仪表盘
例如：集群环境的同步和更新，生产环境的迁移等。
...
1）字体文件需要使用者自己提供。
...
允许通过扩展包的方式把 “自定义图标”上传到图片图标库上，方便更新和维护。
3.使用说明
3.1. 扩展包部署
扩展包：Smartbi_Special_ExtendedFontsDefaultIcons
部署说明：扩展包部署
| 信息 |
|---|
1）更新扩展包之前，请做好知识库以及扩展包的备份。 2）服务器必须重启，否则，交互式仪表盘的相关设置项不会看到对应的字体。更新扩展包之前，请做好知识库以及扩展包的备份。 |
3.2.配置说明
需要用解压工具，把对应的字体文件放到 用解压工具，把对应的图标放到 Smartbi_Special_ExtendedFontsDefaultIcons.ext 对应的目录下，同时 把修改的配置文件替换原来的文件。1）字体目录：把对应的字体文件放到以下目录中对应的目录下
目录：Smartbi_Special_ExtendedFontsDefaultIcons.ext\vision\jsimg\ext\fontscatalogtree
...
| 信息 |
|---|
字体文件需要兼容应用服务器所在的操作系统。1）图标文件的尺寸大小及类型为16x16的PNG文件 |
2）图标文件的命名用字母和数字的组合 |
扩展包自带的字体文件只作为演示使用，如果使用者要用于商用，请自行进行授权的购买。 |
2）css样式文件：修改ExtendedFonts.css文件内容，增加对应的字体文件的定义
目录：Smartbi_Special_ExtendedFonts.ext\vision\css\ExtendedFonts.css
示例：
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
@font-face {
font-family: 'impact-2';
font-style: normal;
font-weight: 400;
src: url(../js/ext/fonts/impact-2.ttf) format('truetype');
}
@font-face {
font-family: 'NotoSansCJK-Regular-1';
font-style: normal;
font-weight: 400;
src: url(../js/ext/fonts/NotoSansCJK-Regular-1.otf) format('opentype');
}
@font-face {
font-family: 'PingFang-Jian-ChangGuiTi-2';
font-style: normal;
font-weight: 400;
src: url(../js/ext/fonts/PingFang-Jian-ChangGuiTi-2.ttf) format('truetype');
} |
| 信息 |
|---|
不同格式的字体，配置css中的format不同； 例如： ttf后缀的字体：format('truetype') otf后缀的字体：format('opentype'); woff后缀的字体：format('woff'); woff2后缀的字体：format('woff2'); eot后缀的字体：format('embedded-opentype'); |
3）配置文件：修改ConfigurationPatch.js文件内容，增加对应的字体文件的配置
目录：Smartbi_Special_ExtendedFonts.ext\vision\js\ext\ConfigurationPatch.js
示例：
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
var ConfigurationPatch = {
extensionPoints: {
css: ["vision/css/ExtendedFonts.css"],
//自定义字体名称：值格式为二维数组
//第一维数组的每一个元素代表一种字体配置
//第二维数组的第1个元素为字体真实值，第2个元素为字体显示值（不要使用中文）
xfontFamilies: [
["impact-2", "impact"],
["NotoSansCJK-Regular-1", "NotoSansCJK"],
["PingFang-Jian-ChangGuiTi-2", "PingFang-Jian"]
],
}
}; |
| 信息 |
|---|
字体真实值为字体的英文字体名字，若输入的字体真实值无效，该字体便以默认值为准。 |
3.3.前端效果
3）新增的自定义图标默认放在最上方
|
| 警告 |
|---|
扩展包自带的图标文件只作为演示使用，如果使用者要用于商用，请自行进行授权的购买。 |
3.3.前端效果
1）资源树上，对“资源”点击鼠标右键，选择“属性”
2）在“资源属性”框中，在“图标”进行选择
3）在“选择图标”框中，在“图片图标”中可以看到通过扩展包增加的图标图片
4）资源树显示的效果
