HTML中ruby标签与各种字体的兼容度评测-html教程-PHP中文网

ruby标签本身不依赖特定字体，但注音显示是否正常取决于字体对东亚字符宽度、基线及上标区域的支持；系统中文字体（如pingfang sc、noto sans cjk）表现稳定，而西文字体或等宽字体易致rt错位甚至塌陷，需显式声明rt的font-family并设固定像素字号（如12px）以确保兼容。

html中ruby标签与各种字体的兼容度评测

ruby标签在不同字体下是否显示正常

ruby本身不依赖特定字体，但注音效果是否清晰、位置是否偏移，高度取决于字体对东亚字符宽度、基线（baseline）和上标区域的支持。系统默认中文字体（如“PingFang SC”“Noto Sans CJK”“Microsoft YaHei”）通常表现稳定；而西文字体（如“Helvetica”“Arial”）或等宽字体（如“Fira Code”“JetBrains Mono”）用于ruby时，rt极易错位甚至垂直塌陷——因为它们缺乏对ruby-position: over所需字形度量的支持。

测试发现：用"Segoe UI"显示汉字+拼音时，rt常整体下移2–3px，需额外加rt { vertical-align: text-top; }校正
"Noto Sans JP"和"Source Han Serif"对假名注音支持最完整，rt自动居中且字号缩放比例自然
禁用font-family全局继承到rt：显式声明rt { font-family: "PingFang SC", "Hiragino Kaku Gothic Pro", sans-serif; }，避免父级西文字体污染

font-size设为百分比时rt文字被截断或偏移

这是最常被忽略的兼容陷阱：rt的默认字号由浏览器按基文字x-height推算，而非简单继承父级font-size。设font-size: 70%在Chrome可能缩得过小导致截断，在Safari则可能因计算逻辑不同而上下浮动。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

唯一可靠做法是给rt设固定像素值，例如rt { font-size: 12px; line-height: 1; }
若需响应式，改用clamp(10px, 1.2vw, 14px)替代百分比，避开浏览器对rt的特殊缩放规则
不要对ruby本身设font-size——它不传递给rt，反而可能干扰基文字渲染

Android WebView和旧版iOS Safari中ruby显示异常

虽然Chrome 5+/Firefox 38+/Edge 12+支持良好，但Android 4–9的WebView（基于旧版Chromium）和iOS 12及更早Safari存在两个典型问题：一是rt完全不显示；二是rp括号重复出现（即“(hàn)(hàn)”）。

检测支持性可用typeof CSS.supports !== 'undefined' && CSS.supports('ruby-position', 'over')，不支持时降级为<span class="ruby-fallback">汉<span class="rt">(hàn)</span></span>
避免在rt内使用em、rem单位——旧引擎无法解析其相对于基文字的基准
iOS 13+已修复大部分问题，但部分定制ROM仍沿用Android 7 WebView内核，建议在rt上加transform: translateZ(0)强制触发硬件加速以减少重绘丢失

自定义字体（WOFF2）加载后ruby注音错位

当使用@font-face引入第三方中文字体（如“HarmonyOS Sans SC”或“OPPO Sans”）时，rt常出现横向偏移或与基文字脱节。根本原因是字体文件未嵌入完整的OpenType ruby特性表（rbdf或trak），导致浏览器无法正确计算注音锚点。

优先选用明确标注“支持Ruby注音”的字体，例如Google Fonts上的Noto Sans CJK系列（其WOFF2含完整trak表）
若必须用自定义字体，可在ruby外层加display: inline-flex; align-items: flex-start;，再用rt { margin-left: -2px; }手动微调
禁止对ruby设letter-spacing——它会同步作用于基文字和rt，造成相对位置紊乱