百度富文本编辑器UEditor增加自定义字体

时间:2024-03-15 19:19:15

需要解决的问题:

给编辑器*增加自己想要的字体(而不局限于系统本身自带字体)


以下分两种情况给出解决方案:

1. 常见系统自带字体

2. 自定义字体

 

1. 常见系统自带字体

百度富文本编辑器UEditor增加自定义字体

图片中是我们系统中默认自带的一些字体:下面就拿其中的Calibri字体作为例子

1.1 找到截图中的路径,添加Calibri这个字体

百度富文本编辑器UEditor增加自定义字体

1.2 找到截图中的路径,添加Calibri字体

百度富文本编辑器UEditor增加自定义字体

 

1.3 效果(这样就添加好了字体)

百度富文本编辑器UEditor增加自定义字体

2. 自定义字体

自定义字体跟上面添加字体的步骤是一样的,就是多了跟我们编辑器项目增加引入字体的操作

2.1 分别在两张截图的路径添加aa字体

百度富文本编辑器UEditor增加自定义字体

百度富文本编辑器UEditor增加自定义字体

完成上面两个步骤,我们可以在编辑器的字体列表里面添加了aa的字体,但是选择aa这个字体是没有效果的,因为我们的系统和项目里面都没有这个aa字体。这是正常的。

百度富文本编辑器UEditor增加自定义字体

2.2 给编辑器增加aa字体

百度富文本编辑器UEditor增加自定义字体

2.3 在截图路径中定义aa字体

百度富文本编辑器UEditor增加自定义字体

 

这样就完成,在编辑器中选择aa字体,就能看到我们自定义的字体效果了。

百度富文本编辑器UEditor增加自定义字体

 

2.4 上面的步骤已经可以让我们在编辑器里面看到字体效果了,但是我们添加字体的最终目的是要在项目中展示。所以这一步就是在项目中添加字体。下面以vue作为例子。

在app.vue文件中,添加定义aa字体的代码

百度富文本编辑器UEditor增加自定义字体

然后把相应文件放到项目相应目录就可以看到效果了