百度编辑器Ueditor增加字体修改方法|新手必看超详细教程

第一步：先找对能放心用的字体文件

要加新字体，首先得有正确格式的字体文件。Ueditor支持的字体格式是.ttf或.otf（这俩是最通用的纯字体文件），别下那种带.exe安装器的——我之前帮朋友误下过，差点把电脑搞出病毒，后来才知道纯字体文件只有.ttf/.otf后缀。

去哪里找安全的字体？推荐这几个渠道：

比如你想加“华文琥珀”，就下载它的.ttf文件，改个短名字（比如“hwhb.ttf”）——名字别带特殊符号，不然后面调用容易出错。

第二步：把字体文件传到服务器的“font”文件夹

接下来要把字体文件放到Ueditor能找到的地方。首先找到你网站上Ueditor的安装目录（比如“你的网站根目录/ueditor/”），在里面新建一个叫“font”的文件夹（如果已经有就不用建）。然后把字体文件传到这个“font”文件夹里，比如最终路径是：你的网站根目录/ueditor/font/hwhb.ttf。

重点提醒：路径一定要对！我第一次帮朋友传的时候，把“font”写成了“fonts”，结果后面调用字体时一直显示不出来，查了半天才发现文件夹名错了。验证方法很简单：传完后在浏览器输入你的网站地址/ueditor/font/hwhb.ttf，如果能下载文件，说明路径正确。

第三步：修改config.js，让下拉框显示新字体

现在要让Ueditor的字体下拉框里出现你加的字体，得改它的核心配置文件config.js。找到Ueditor目录里的“config.js”，用文本编辑器（比如Notepad++）打开，找“fontfamily”这个配置项——它长这样：

fontfamily: '宋体,微软雅黑,楷体,黑体'

你要做的是在后面加逗号和新字体名称，比如：

fontfamily: '宋体,微软雅黑,楷体,黑体,华文琥珀'

注意！字体名称要和后面CSS里的完全一致（比如“华文琥珀”别写成“华文琥铂”）——我朋友之前就是差了一个字，结果下拉框显示了但选了没效果，改对后才正常。

第四步：加CSS样式，让字体能显示出来

最后一步是给新字体写CSS规则，不然Ueditor认不出来。找到Ueditor目录里的ueditor.css（或editor_ui.css，不同版本名字可能变，搜“@font-face”能快速定位），用文本编辑器打开，在文件最上面或最下面加一段代码：

@font-face {
 font-family: '华文琥珀'; / 必须和config.js里的名称一致！ /
 src: url('../font/hwhb.ttf') format('truetype'); / 字体文件路径 /
 font-weight: normal;
 font-style: normal;
}

这里得解释下每个参数的意思：

改完保存CSS文件，上传回服务器。

最后：测试效果+避坑提醒

现在所有步骤都做完了，打开Ueditor看看：

如果没显示，按这3个方法排查：

附：3款免费商用字体推荐（直接拿走）

怕你找字体麻烦，我整理了3款常用免费商用字体，风格、适用场景都列清楚了，放心用：

按上面的步骤做完，你就能给Ueditor加任何想要的字体了。我朋友加了“华文琥珀”后，他的美食文标题一下子变生动了，阅读量比之前涨了20%——虽然不是字体直接带来的，但至少让内容更有记忆点。

如果你试了这些方法，欢迎回来告诉我效果；要是碰到问题（比如字体不显示、路径错了），也可以在评论区问我，我帮你看看——毕竟我也是踩过坑的人，知道新手遇到问题有多急～

先别急，第一步先确认你字体文件的路径对不对——是不是真的放到Ueditor安装目录下的font文件夹里了？比如你网站根目录是/www，那正确路径得是/www/ueditor/font/你的字体文件.ttf。怎么验证？打开浏览器输你网站地址+ueditor/font/字体文件名（比如www.xxx.com/ueditor/font/hwhb.ttf），能下载文件就说明路径没错；要是跳404，要么是文件夹名写错了（比如把font写成fonts多了个s），要么是传文件时放错位置——我之前帮朋友弄的时候，他把font建在ueditor的css文件夹里，找了半小时才发现，白折腾。

接下来得盯着“名字”死磕——你在config.js的fontfamily里加的字体名，和CSS里@font-face的font-family，必须一模一样，连个标点都不能差。比如想加“华文琥珀”，config.js里写“华文琥珀”，CSS里也得是“华文琥珀”，可别手快打错字（比如把“琥”写成“虎”，或者“珀”写成“泊”）。我之前就栽过这坑：下拉框里明明有“华文琥珀”，选了却没反应，查了半小时config.js和CSS，最后盯着两个“华文琥珀”看了三分钟，才发现CSS里的“琥”少了一横，真是欲哭无泪。

最后还有个“隐形坑”——清浏览器缓存！你改了config.js和CSS，浏览器可能还存着旧文件，就算前面都对了，它也不显示新字体。这时候按Ctrl+F5强制刷新，或者换个隐身窗口打开Ueditor——我自己常犯懒，改完直接点刷新，结果没效果，还以为哪里错了，其实就是缓存搞的鬼，清一下就好。

Ueditor支持哪些字体文件格式？

Ueditor主要支持.ttf或.otf格式的纯字体文件，不 使用带.exe安装器的字体文件，这类文件可能包含多余程序或风险，且无法被编辑器正确识别。

为什么传了字体文件，Ueditor里还是看不到新字体？

首先检查字体文件路径是否正确（如是否放到Ueditor目录下的font文件夹，路径可通过浏览器访问验证）；其次确认config.js里的字体名称与CSS中的font-family完全一致；最后强制刷新浏览器（Ctrl+F5）清除缓存，旧缓存可能导致新配置不生效。

加自定义字体需要注意版权问题吗？

需要！ 优先选择免费商用字体（如思源黑体、阿里巴巴普惠体、站酷快乐体等大厂开源字体），避免使用未授权的付费字体，否则可能面临版权纠纷。下载字体时务必查看“版权说明”，标有“免费商用”的字体才能安全使用。

修改config.js后，字体下拉框还是没新字体怎么办？

先检查config.js中的“fontfamily”配置项是否正确添加了新字体（如在原有列表后加“，华文琥珀”）；再确认配置文件已保存并上传到服务器；最后清除浏览器缓存（Ctrl+F5），确保加载最新的config.js内容。

字体文件的名字可以带特殊符号吗？

不 字体文件名字最好用短且无特殊符号的英文或拼音（如“hwhb.ttf”对应“华文琥珀”），带特殊符号（如@、#、空格）或过长的名字可能导致编辑器调用时出现路径错误，影响字体正常显示。

YUANLEISVIP

收藏 链接