开发JavaScript WYSIWYG编辑器：如何确保字体正常显示？

嘿，这个场景我之前做内部富文本编辑器的时候也碰到过，结合你的需求（不用支持移动端、依赖基础字体），给你几个靠谱的思路：

一、先放个定心丸：基础系统字体其实足够安全 #

你提到的Arial这类基础字体，在桌面环境下的覆盖率高得离谱：

• Windows系统默认就预装Arial；
• macOS虽然默认用Helvetica，但几乎所有Mac都会兼容Arial（毕竟Office这类常用软件会自带安装）；
• Linux桌面发行版（比如Ubuntu、Fedora）也大多预装了Liberation Sans——这货和Arial外观几乎一模一样，是完全开源的替代款。

如果你的用户都是桌面端，直接用这些基础系统字体是非常稳妥的选择，几乎不会碰到用户设备没有的情况，而且系统字体加载速度快到飞起，完全没网络请求的开销。

二、如果一定要通过服务器提供字体（避免极端场景） #

先提醒一句：Arial是商用字体（归属Monotype），你不能随便把它放到自己服务器上分发，这会踩版权红线。但有几个合法的替代方案：

• 用开源替代字体：比如Liberation Sans、Open Sans、Roboto，这些都是完全免费开源的，你可以合法下载后放到自己服务器，或者用CDN加载。它们的字形和Arial高度相似，用户基本看不出差异；
• 用免费Web字体服务：比如直接用Google Fonts的Roboto，只需要在页面头部加一行CSS引入，然后把编辑器的字体选项换成Roboto就行，它会自动帮你处理字体加载。

举个简单的实现例子，先引入Web字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

然后在编辑器的字体选择下拉框里添加Roboto选项，用户选择后给选中文本设置样式：

// 假设获取到用户选择的字体名称是Roboto
const selectedText = window.getSelection().focusNode.parentElement;
selectedText.style.fontFamily = '"Roboto", Arial, sans-serif';

三、编辑器字体设置的小细节 #

既然是WYSIWYG编辑器，要确保预览和最终输出都不出问题：

• 哪怕你觉得不需要fallback，也建议在设置font-family的时候加上系统兜底字体。比如上面代码里的Arial, sans-serif，万一Web字体加载失败，也能保证文本正常显示，不会乱成一团。

内容的提问来源于stack exchange，提问作者Reenergy