这个问题我之前在Electron开发里踩过坑！默认情况下，系统（尤其是Windows）会把像✔这类字符优先匹配到Segoe UI Emoji字体，导致渲染出来的样式和你想要的普通符号风格不一致，而且还会随机变化——这其实是字体匹配机制在搞鬼。

下面给你两个靠谱的解决方法：

1. 强制指定非Emoji字体栈 #

直接给你的:before伪元素指定优先使用包含普通符号的字体，把Emoji字体往后放，这样系统就会优先选择非Emoji的样式：

.custom-checkbox:before {
  content: '✔';
  /* 优先用Segoe UI Symbol（非Emoji版本的符号字体），再 fallback 到其他通用字体 */
  font-family: 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
  /* 其他样式（比如颜色、大小）按需添加 */
  color: #2196F3;
  font-size: 16px;
}

Segoe UI Symbol是Windows系统自带的专门用于显示符号的字体，里面的✔就是你想要的普通线条样式，不会变成圆润的Emoji。

2. 禁用Emoji字体变体 #

如果指定字体栈还是不行，可以尝试用CSS的font-feature-settings属性强制关闭Emoji变体渲染：

.custom-checkbox:before {
  content: '✔';
  /* 禁用Emoji变体，强制使用普通符号样式 */
  font-feature-settings: 'emoj' 0;
  /* 搭配字体栈效果更好 */
  font-family: sans-serif;
}

这个属性会告诉浏览器不要启用Emoji的渲染特性，让字符以普通文本符号的形式展示。

另外要注意：如果你的content里不小心用了带变体选择器的✔️（U+2714 U+FE0F），一定要改成纯✔（U+2714），不然即使设置了字体，系统还是会优先渲染成Emoji。

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