如何用CSS解决音乐变音记号的跨平台渲染与字体兼容问题？

问题场景 #

以下是一段HTML代码片段：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
<p>html code: C&#9839; C&#9837; C&#9838; or paste: sharp (C♯), flat (C♭), natural (C♮)</p>

在PC端Firefox中，实体编码与直接粘贴符号的写法显示均正常，但在Android和Safari浏览器中，降号（♭）和还原号（♮）存在严重字距问题。为排查原因，移除所有font-family设置并添加如下CSS：

p {color:red;}

测试结果：PC端Firefox中所有内容均显示红色；其他平台升号（♯）显示红色，而降号和还原号仍为黑色。最新版Safari中三个符号都能显示红色，但字距问题依旧。

问题 #

1. 这是否意味着在Android和Safari中，&#9837、&#9838不会使用默认字体渲染，而&#9839会？
2. 应使用哪种字体才能在PC Firefox、Android、Safari三个平台上正常渲染这三种变音记号？

注：已实现HTML文件自动化生成，倾向纯CSS解决方案，暂不考虑HTML5、XML等复杂方案。

回答 #

针对问题1

是的，这种表现直接说明：Android和旧版Safari中，降号（对应Unicode编码U+266D，实体♭）、还原号（对应U+266E，实体♮）没有继承当前元素的默认字体样式，而升号（对应U+266F，实体♯）可以正常继承。

核心原因是部分平台的默认字体未包含U+266D、U+266E的字符字形，浏览器会自动切换到其他包含这些字符的 fallback 字体，这类 fallback 字体不受当前元素的CSS样式（如color）影响，同时不同字体的字符宽度差异也会导致字距异常。

针对问题2

推荐使用以下跨平台通用字体栈，确保三个变音记号在目标平台统一渲染：

p {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
}

• Segoe UI Symbol：Windows平台自带，完整覆盖音乐符号
• Apple Symbols：苹果全平台（iOS/macOS/Safari）原生符号字体
• Noto Sans Symbols：Google开源无衬线符号字体，Android及其他平台兼容度高，可作为兜底备选
• 最后的sans-serif作为终极 fallback

如果字距问题仍存在，可尝试禁用连字规则避免符号与字母间的异常间距：

p {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
  font-variant-ligatures: none;
}

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