字体设置

更新时间: 2022/09/16 09:13:52

网易云信互动白板支持导入字体,并支持在多个字体之间切换。云信互动白板默认使用的字体为Helvetica。本文介绍如何在教学阶段和回放阶段设置字体。

教学阶段

在教学阶段设置了字体后,回放阶段也需要设置同样的字体,才能够保证回放时的字体和教学时一致。

提供的字体需要保证浏览器之间的兼容性。如果字体文件在大部分浏览器中部支持,则推荐您提供字体文件的下载地址。

jsdrawPlugin.setFontFamilies([
    {displayName: 'Helvetica', fontName: 'Helvetica'},
    {displayName: 'Times New Roman', fontName: 'Times New Roman'},
    {displayName: 'Garamond', fontName: 'Garamond'},
    {displayName: 'Courier New', fontName: 'Courier New'},
    {displayName: 'Noto Sans SC', fontFace: {
        url: `https://www.example.com/Noto_Sans_SC/NotoSansSC-Regular.otf`,
    }},
    {displayName: 'Open Sans', fontFace: {
        url: `www.example.com/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf`,
    }}
])

回放阶段

录像回放时字体设置:

jsRecordPlayer.getInstance({
    whiteboardParams: {
        urlArr: window.replayUrls,
        container: document.getElementById('wb') as HTMLDivElement
    }
})
.then(({player, drawPlugin}) => {
    player.bindControlContainer(document.getElementById('tb') as HTMLDivElement)

    drawPlugin.setFontFamilies([
            {displayName: 'Helvetica', fontName: 'Helvetica'},
            {displayName: 'Times New Roman', fontName: 'Times New Roman'},
            {displayName: 'Garamond', fontName: 'Garamond'},
            {displayName: 'Courier New', fontName: 'Courier New'},
            {displayName: 'Noto Sans SC', fontFace: {
                url: `https://www.example.com/Noto_Sans_SC/NotoSansSC-Regular.otf`,
            }},
            {displayName: 'Open Sans', fontFace: {
                url: `www.example.com/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf`,
            }}
    ])
})
此文档是否对你有帮助?
有帮助
去反馈
  • 教学阶段
  • 回放阶段