在SpreadJS中使用符号字体

收藏

本帖最后由 dexteryao 于 2020-9-23 23:12 编辑

在程序开发以及编写文档时，偶然会遇到一些特殊图形，针对这些图形，可以使用图片，还可以使用特殊的符号字体。相对于图片，矢量符号字符容易控制大小，颜色和位置。
如下图Webdings就是常用的一个符号字体，在SpreadJS在线表格编辑器中，通过在富文本单元格中使用Webdings字体，将字符“4”显示为三角符号“4”。
image.png457868651.png

Webdings作为系统自带字体，在网页中可以直接使用，那么如何使用非常规字体，打开网页机器没有安装对应字体该如何处理呢？
我们已前端常用的font awesome字体图标为例，看看如何在SpreadJS和PDF中使用符号字体。
在网页中使用font awesome 图标时只要在class加入对应图标的class即可，例如“<i class="fa fa-rmb" aria-hidden="true"></i>”。
但是在SpreadJS中，并无法使用class。那么将通过字符的方式使用图标。具体步骤如下：
1. 网页引用font awesome css样式文件
在页面中引入font awesome,可以直接使用cdn
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
css中会通过使用@font-face自动加载字体到浏览器，无需用户安装font awesome字体

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

复制代码

2. 获取图标字符。
在font awesome页面直接复制字符， image.png465331115.png

3. SpreadJS设置font awesome字体，粘贴字符。

sheet.getRange(0, 0, 2, 2).font("24px FontAwesome")

复制代码

未设置字体则显示方框，也可在SpreadJS在线表格编辑器的富文本单元格编辑框中直接粘贴该字符。
image.png471917418.png

4. 如有使用GCExcel导出PDF，则需要将fontawsome字体安装至服务器，或者给GCExcel 指定含有fontawesome字体的文件夹路径
指定路径：
Workbook.FontsFolderPath = "/pdfFont"; //包含文档中需要使用到的字体
导出PDF效果
image.png804042358.png

如果各种符号字体中没有需要的符号，也可以通过自定义符号字体的方式支持，具体可参考SpreadJS通过自定义字体解决文档中特殊字符的问题

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

在SpreadJS中使用符号字体

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章