如何在CKEditor4中使用VW单位设置字体大小？

AI 小北

2026-5-28

解决CKEditor4中设置VW单位后字体极小的问题

嘿，我之前也踩过CKEditor4单位适配的坑，给你几个实用的调整方向，应该能解决你附图里字体极小的问题：

调整字体大小的数值对应关系
VW是基于视窗宽度的相对单位（1vw = 视窗宽度的1%），如果你直接把原来的PX数值换成VW，比如把16px直接改成16vw会大到离谱，但如果没换算就硬替换单位（比如把16px写成1vw），就会出现你遇到的极小情况。正确的做法是把PX数值换算成对应的VW值，比如假设目标视窗宽度是1200px，16px对应的就是16/1200*100 ≈ 1.33vw。你可以在config.js里重新定义字体大小选项：
```
config.fontSize_sizes = '1vw/小字体;1.33vw/常规字体;1.8vw/大字体;2.5vw/超大字体';
```
自定义编辑器内容区的默认样式
有时候编辑器的默认样式会覆盖你的单位设置，你可以找到CKEditor的contents.css文件（通常在ckeditor/contents.css路径下），修改内容区的默认字体大小：
```
body {
    font-size: 1.33vw !important;
    margin: 8px;
}
```
结合媒体查询避免小屏幕字体过小
VW在小屏幕设备上可能会导致字体太小影响可读性，你可以在contents.css里添加媒体查询做适配：
```
@media screen and (max-width: 768px) {
    body {
        font-size: 16px !important;
    }
}
```
排查是否有其他样式冲突
检查你是否安装了其他格式相关的插件，或者自定义了编辑器的样式表，有些插件可能会强制使用PX单位覆盖你的VW设置，这时候需要调整插件的配置或者样式优先级。