如何在CKEditor中配置使用僧伽罗语字体?
在CKEditor中配置僧伽罗语字体的完整优化方案
我看到你已经在尝试给CKEditor添加僧伽罗语字体了,结合你给出的初始配置,我来把这个方案补全并优化,确保Unicode和非Unicode类型的字体都能在编辑器里正常工作:
1. 完善CKEditor的config.js配置
首先调整config.js的代码,确保自定义字体样式表的路径正确,同时把僧伽罗语字体加入编辑器的字体下拉列表:
// config.js // 引入默认内容样式文件+自定义字体样式表 config.contentsCss = [ CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('fonts.css') // 注意:路径要和你的实际文件位置匹配,可根据目录层级调整 ]; // 将僧伽罗语字体追加到默认字体列表前 config.font_names = 'Iskolapota/iskolapota;' + config.font_names; config.font_names = 'Amalee/amalee;' + config.font_names; config.font_names = 'FM Abhaya/fm_abhay;' + config.font_names;
2. 编写完整的fonts.css字体规则
补全@font-face规则,加入多种字体格式以兼容不同浏览器,同时明确字体的权重和样式:
/* fonts.css */ /* Iskolapota 僧伽罗语字体配置 */ @font-face { font-family: 'Iskolapota'; src: url('../../../font/iskolapota.eot'); /* IE9兼容模式 */ src: url('../../../font/iskolapota.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../../font/iskolapota.woff2') format('woff2'), /* 现代浏览器 */ url('../../../font/iskolapota.woff') format('woff'), /* 旧版浏览器 */ url('../../../font/iskolapota.ttf') format('truetype'); /* 移动端/ Safari */ font-weight: normal; font-style: normal; } /* Amalee 僧伽罗语字体配置 */ @font-face { font-family: 'Amalee'; src: url('../../../font/amalee.eot'); src: url('../../../font/amalee.eot?#iefix') format('embedded-opentype'), url('../../../font/amalee.woff2') format('woff2'), url('../../../font/amalee.woff') format('woff'), url('../../../font/amalee.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* FM Abhaya 僧伽罗语字体配置 */ @font-face { font-family: 'FM Abhaya'; src: url('../../../font/fm_abhay.eot'); src: url('../../../font/fm_abhay.eot?#iefix') format('embedded-opentype'), url('../../../font/fm_abhay.woff2') format('woff2'), url('../../../font/fm_abhay.woff') format('woff'), url('../../../font/fm_abhay.ttf') format('truetype'); font-weight: normal; font-style: normal; }
3. 关键注意事项
- 字体路径核对:一定要确认
url()中的路径和你的字体文件实际位置一致,CKEditor的路径是相对于其安装目录的,比如../../../font/表示从CKEditor的css目录往上三级到font文件夹,可根据你的项目结构调整层级。 - 非Unicode字体兼容:如果使用的是非Unicode编码的僧伽罗语字体,要确保页面的字符编码设置为UTF-8(在页面头部添加
<meta charset="UTF-8">),CKEditor默认也是UTF-8编码,一般不会有问题。 - 调试字体加载:配置完成后重启CKEditor,选择字体下拉菜单中的僧伽罗语字体输入文本测试。如果字体不显示,可打开浏览器开发者工具的Network面板,检查字体文件是否加载成功,排查路径错误或文件缺失问题。
内容的提问来源于stack exchange,提问作者MJ-Dev




