Chrome 浏览器对孤立的 Arabic diacritical marks（如ّ، ٍ， َ 等）默认渲染尺寸极小甚至不可见，导致为其设置 color 样式无效；通过显式声明 font-size 可强制其正常渲染并响应颜色样式。
chrome 浏览器对孤立的 arabic diacritical marks（如ّ， ٍ， َ 等）默认渲染尺寸极小甚至不可见，导致为其设置 `color` 样式无效；通过显式声明 `font-size` 可强制其正常渲染并响应颜色样式。
在 Web 开发中，为阿拉伯语变音符号（如舒达、开合符、叠音符等）单独着色时，常遇到跨浏览器兼容性问题：Firefox 能正确渲染并应用 color 样式，而 Chrome 却显示为透明或无效果。根本原因在于 Chrome 对 Unicode 中非独立字形的组合标记（Combining Characters）（如 U+064D — ARABIC KASRATAN）采用极小的默认字号（常趋近于 0px），导致即使设置了 color: red，该符号也因“不可见”而无法呈现。
✅ 正确解决方案是：为包裹变音符号的 显式指定 font-size，确保其获得可渲染的尺寸。无需 -webkit-color（该 CSS 属性不存在，属误用），只需标准 color + font-size 即可生效。
以下为修复后的完整示例：
<style>
.redcolor {
color: red;
font-size: 1.2em; /* 关键：必须设置有效字号 */
vertical-align: middle; /* 可选：优化基线对齐 */
}
</style><div id="testdiv"></div>
<script>
let str = "شَيْءٍ ";
// 匹配 U+064D（Arabic Kasratan）——注意：实际文本中该符号常与前一字母组合显示
str = str.replace(/(\u064D)/g, "<span class='redcolor'>$1");
document.getElementById("testdiv").innerHTML = str;
</script>
⚠️ 注意事项：
- 不要使用无效属性如 -webkit-color；color 是标准且跨浏览器支持的。
- font-size 值建议使用相对单位（如 1em、1.2em）或像素值（如 14px），避免设为 0 或过小值（如 1px 在高 DPI 屏幕下仍可能不可见）。
- 若需同时高亮多个变音符号（如 َ U+064E、ِ U+064D、ُ U+064F），可扩展正则：/([\u064B-\u0652])/g
- 某些字体对组合符号支持不佳，建议在 CSS 中指定支持阿拉伯语的字体栈，例如：font-family: 'Segoe UI', 'Noto Naskh Arabic', sans-serif;
总结：Chrome 的行为并非 Bug，而是其对组合字符的默认渲染策略更严格。通过赋予明确 font-size，我们主动参与渲染流程，从而可靠实现阿拉伯变音符号的样式定制——这是面向中东语言 Web 开发的关键实践之一。
