利用字体插入符号（一）

收藏

本帖最后由 Ellia.Duan 于 2024-7-26 13:34 编辑

在这篇文章中，https://gcdn.grapecity.com.cn/showtopic-141010-1-1.html
利用iconfont 在SpreadJS中插入特殊符号。

但是在SpreadJS中，支持Wingdings字体，如
image.png820205993.png

在excle中，我们可以利用Wingdings和Wingdings 2 插入很多特殊符号。
所以，在SpreadJS中，我们也可以利用Wingdings和Wingdings 2 插入很多特殊符号。

我们首先介绍下，在Designer中，如何插入"Wingdings 2 "字体。
一、字体安装
1、在字体菜单中添加字体

var fontFamilyCmd = GC.Spread.Sheets.Designer.getCommand("fontFamily");
var customCNFont = [
{value: "'Wingdings 2'", text: "Wingdings 2"}
];
fontFamilyCmd.dropdownList = customCNFont.concat(fontFamilyCmd.dropdownList);
var ribbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
ribbonConfig.commandMap = {
fontFamily: fontFamilyCmd
}
designer.setConfig(ribbonConfig);

复制代码

2、在富文本编辑器中或者图表侧边栏种添加字体

var res = GC.Spread.Sheets.Designer.getResources();
res.ribbon.fontFamilies['ff24'] = {
name: "'Wingdings 2'", text: "Wingdings 2",
}
GC.Spread.Sheets.Designer.setResources(res);

复制代码

结果如下：

3、在单元格格式弹窗中添加字体
相关代码：

var stringFormatDialogTemplate = GC.Spread.Sheets.Designer.TemplateNames.FormatDialogTemplate;
var formatDialogTemplate = GC.Spread.Sheets.Designer.getTemplate(stringFormatDialogTemplate);
formatDialogTemplate.content[0].children[2].children[0].children[0].children[0].children[1].items.unshift(
{
text: "Wingdings 2",
value: "'Wingdings 2'"
}
)
GC.Spread.Sheets.Designer.registerTemplate(stringFormatDialogTemplate, formatDialogTemplate);

复制代码

结果如下：

二、添加特殊字符
添加字体后，我们怎么知道我们想要的图标是什么编码呢？
不着急，我们先打开Excel。
image.png594187011.png

如上图所示，我们在Excel中点击”插入“”符号“ 选择”Wingdings 2“字体，然后选择对勾。发现右小角有一个字符代码。

这个字符代码是80 ，也就是对应的键盘值 P
此时，我们在SpreadJS中输入P，然后选择”Wingdings 2“字体，就可以看到对勾了。
image.png556451720.png

关于字符代码与键盘值的对应关系，可以查看这个图
image.png141121825.png

或者直接在此网站中查找：https://www.bejson.com/othertools/keycodes/

或者是我们在Excel中选择插入符号后，在公式编辑器中，可以看到对应的字符，如下图所示：
image.png134565733.png

我们识别到上述两个字符对应的英文字符是”RT“
所以在Designer中，输入”RT“ , 然后选择”Wingdings 2“字体，就看到自己想要插入的符号了。

关于添加SJQY字体，可以参考这篇文章：
https://gcdn.grapecity.com.cn/showtopic-220437-1-1.html

		自动登录	找回密码
密码			立即注册

利用字体插入符号（一）

0 个回复

SpreadJS 认证

SpreadJS 高级认证