# 如何添加添加字体库？

# 在设计器中没有需要的字体

# 示例

产品自带字体库不够用，根据客户需求增加字体库，比如：增加"和风"字体

# 实现步骤

1、准备好字体库，需要"svg"、"ttf"、"woff"格式的字体文件，如果客户要用到IE浏览器，还需要准备"eot"格式的字体文件；推荐一个字体转换的网站：https://convertio.co/zh/font-converter/ 特别提醒：部分字体使用是有版权费

2、构建字体目录结构，字体存放路径以及结构如下图所示

字体库扩展目录 /seeyon/common/capextend/cap4/form/utils/customfont（"customfont"文件加可以自己定义）

3、设计器扩展脚本入口，/seeyon/common/cap4/design/extend.js，引入扩展字体库文件index.js,示例如下

window.formDesignerExtend = {
    config: {
        baseCfg: {supportWhitePluginCfg: true, supportDesign: true},
        toolbar: {
            hasInit: false,
            fontFamilyExtend: [['HeFengShuDao', '和风']],
            get fontSizeExtend() {
                if (!this.hasInit) {
                    this.init();
                }
                return [];
            }
            , init: function () {
                //在表单设计器中引入新增字体样式文件
                var fontJS = document.querySelector("#formdesign-frame").contentDocument.createElement('script');
                fontJS.setAttribute('type', 'text/javascript');
                fontJS.setAttribute('async', 'false');
				//引入扩展字体库的index.js文件
                fontJS.setAttribute('src', '/seeyon/common/capextend/cap4/form/utils/customfont/index.js?V=V8_1SP2_230116_1705090');
                document.querySelector("#formdesign-frame").contentDocument.head.appendChild(fontJS);
            }
        }
    }

}

4、index.js代码

function importCss(){
    var url = _ctxPath + '/common/capextend/cap4/form/utils/customfont/customfont.css';
    var conference=document.createElement('link');
    conference.rel = 'stylesheet';
    conference.type = 'text/css';
    conference.href = url;
    document.head.appendChild(conference);
}

importCss();

5、customfont.css引入需要增加的字体库css

@font-face {
    font-family: 'HeFengShuDao';
    src:  url('HeFengShuDao.eot?9ieal7');
    src:  url('HeFengShuDao.eot?9ieal7#iefix') format('embedded-opentype'),
    url('HeFengShuDao.ttf?9ieal7') format('truetype'),
    url('HeFengShuDao.woff?9ieal7') format('woff'),
    url('HeFengShuDao.svg?9ieal7#HeFengShuDao.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

6、打包，重启

7、效果

# 扩展阅读

客户端安装字体可以参考：https://open.seeyoncloud.com/#/faq/faq/v1/share?url=Z2JySmU+NjQ3

创建人：19912713320

修改人：19912713320

快速跳转

如何添加添加字体库？

← 1.使用步骤 3.事件API →