You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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

火山引擎 最新活动