会乱码，但因字体和编码不匹配而非HTML不支持；需声明UTF-8、选用含IPA字符的字体（如Noto Sans）、避免复制粘贴引入控制符，并用<span>而非<ruby>标注，配合字体栈与降级策略保障多端显示。
HTML里直接写IPA音标会乱码吗？
会，但不是因为HTML不支持，而是因为字体和编码没配对。只要页面声明了UTF-8、用的字体包含IPA字符（比如Noto Sans, Charis SIL, Gentium），ə 或 ə 这类符号就能正常显示。常见错误是复制粘贴时带了不可见控制符，或用了不支持扩展拉丁字母的默认系统字体（比如Windows旧版宋体）。
- 确保HTML顶部有
<meta charset="UTF-8"> - 在CSS里显式指定IPA友好的字体：
font-family: "Noto Sans", "Charis SIL", "Gentium", sans-serif; - 避免从Word或网页直接复制音标——容易混入全角空格、零宽字符；建议从IPA Chart官网（internationalphoneticassociation.org）查表后手打或用Unicode输入法
用<span>还是<ruby>做音标标注？
<ruby> 是为汉字注音设计的，语义上不适用于IPA——它强制把音标当“注音”处理，会破坏可访问性（屏幕阅读器可能跳过或误读），且在Chrome/Firefox中对非东亚文字的支持不稳定。实际项目中，95%以上用 <span> 更可控。
- 用
<span class="ipa">ˈkæt</span>配合CSS控制字号、颜色、上下标 - 如果需要区分音节边界，加自定义属性：
<span data-syllable="1">kæ</span><span data-syllable="2">t</span> - 不要用
<sub>或<sup>模拟音标位置——IPA里的送气符ʰ、卷舌符˞等是独立Unicode字符，不是上标字母
如何让IPA在不同设备上显示一致？
没有100%一致的方案，但可以大幅降低失效概率。关键不是“找一个万能字体”，而是提供降级路径和视觉容错。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 字体栈必须包含至少两个IPA专用字体：
"Noto Sans IPA", "Doulos SIL", "DejaVu Sans", sans-serif - 对关键符号（如
ŋ、ʃ、ʒ）做CSS fallback检测（需JS辅助）：用getComputedStyle查当前渲染字体是否含该字形，否则插入提示 - 移动端iOS 15+默认支持IPA，但Android WebView常回落到Droid Sans，建议在
<head>里预加载关键字体文件（WOFF2格式，<50KB）
遇到
先别改HTML，检查三处：
立即学习“前端免费学习笔记（深入）”；
- 浏览器地址栏看URL是否含
%EF%BF%BD（这是UTF-8解析失败的典型替换符） - 右键“查看网页源代码”，确认音标字符在源码里是原样
θ还是已变成θ或乱码字节 - 打开开发者工具 → Elements → 选中音标元素 → 右侧Computed → 查
font-family最终生效的是哪个，再查font-size是否被缩到0.1em导致不可见
复杂点在于：有些音标（如ɚ、ɫ）在部分字体里是组合字符（base + diacritic），渲染引擎处理方式不一；真要保底，就用SVG内联绘制单个音标——但这只适合静态展示，不适合动态文本。
