在Designer中添加中文字体

收藏

本帖最后由 Ellia.Duan 于 2024-1-11 15:28 编辑

可能有很多用户发现了，在官网给出的Designer中，字体列表只有英文字体，这时候如果想设置中文字体，如宋体、楷体怎么办呢？
下面分别对字体列表给出解决方案：

一：开始菜单中的字体列表
image.png603099670.png

如上图所示，想为开始菜单中字体列表添加中文字体，该怎么实现呢？

var fontFamilyCmd = GC.Spread.Sheets.Designer.getCommand("fontFamily");
var customCNFont = [
{ value: "微软雅黑", text: "微软雅黑" },
{ value: "黑体", text: "黑体" },
{ value: "新宋体", text: "新宋体" },
{ value: "仿宋", text: "仿宋" },
{ value: "隶书", text: "隶书" },
{ value: "楷体", text: "楷体" },
];
fontFamilyCmd.dropdownList = customCNFont.concat(fontFamilyCmd.dropdownList);
var ribbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
ribbonConfig.commandMap = {
fontFamily: fontFamilyCmd
}
designer.setConfig(ribbonConfig);

复制代码

具体可以参考这篇文章：
https://gcdn.grapecity.com.cn/showtopic-85499-1-1.html

二、富文本编辑其中的字体列表
image.png69518431.png

如上图所示，想为富文本编辑器中添加中文字体，该如何实现呢？
可以参考下面的代码：

var res = GC.Spread.Sheets.Designer.getResources();
res.ribbon.fontFamilies['ff24'] = {
name:'微软雅黑', text: "微软雅黑",
}
res.ribbon.fontFamilies['ff25'] = {
name:'黑体', text: "黑体",
}
res.ribbon.fontFamilies['ff26'] = {
name:'新宋体', text: "新宋体",
}
GC.Spread.Sheets.Designer.setResources(res);

复制代码

注意：此代码同样适用于图表侧边栏中字体设置，如下图所示：
image.png88733519.png

三、单元格格式弹窗中的字体列表
最后介绍一下在单元格格式中字体tab页添加中文字体，如下图所示：
image.png641711120.png

这种该如何实现呢？
参考下面的代码：

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: "微软雅黑",
value: "微软雅黑"
}
)
GC.Spread.Sheets.Designer.registerTemplate(stringFormatDialogTemplate, formatDialogTemplate);

复制代码

具体可以查看此篇文章：https://gcdn.grapecity.com.cn/showtopic-184346-1-5.html

以上给出的代码可以参考附件中的文件。
以及，此篇文章随时补充。

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

在Designer中添加中文字体

0 个回复

SpreadJS 认证

SpreadJS 高级认证