我只是偶然发现这个关于着色变音符号的问题 https://stackoverflow.com/questions/23537441/how-to-display-accents-over-words-with-different-colors-in-html-css。任务是用除基本文本之外的另一种颜色来为变音符号着色，例如á呈现a蓝色和´红色的。我想我可以尝试一下，通过 unicode 组合标记来分离字母和变音符号，并通过在变音符号上添加另一种颜色span围绕它，像这样：
<p>
p<span>̄ </span>
o<span>̄ </span>
m<span>̃ </span>
o<span>̃ </span>
d<span>̈ </span>
o<span>̈ </span>
r<span>̌ </span>
o<span>̌ </span>
</p>
现在，定义了一个像这样的简单 CSS，
p { color:blue; }
span { color:red; }
我得到了以下非常出乎意料但很漂亮的结果：
这里发生了什么？我天真地猜测字体渲染算法更喜欢预渲染字符，例如ōõöřǒ，只要它们存在于字体中，就可以动态组合，例如p̄m̃d̈，将其回顾性地呈现为一个或两个单独的项目，然后仅在第二种情况下触发变音符号着色。 （请坦白地告诉我，这种解释完全是无稽之谈。）此外，这意味着为变音符号着色的方法实际上在非标准情况下有效。谁能解释这种行为？有没有办法对其他（完全蓝色）字母也强制执行此操作？这是一种“有趣”的问题，目前尚未与应用程序相关联，但它可能是一个值得学习的有趣案例。
我贴了一个fiddle https://jsfiddle.net/4wkj3xgj/这样你就可以玩弄它了。
RandomGuy32 提出的一种有效解决方案是
将组合字形连接器 (U+034F) 插入底座之间
字母和口音。这样字体渲染器就不会尝试
替换预先组合的字形，并将颜色应用于每个字形
字符分开。
我在fiddle https://jsfiddle.net/4wkj3xgj/2/（我的问题中提到的版本2）。我在每个基本字母后面直接放置了 U+034F，实际上这正如 RandomGuy32 所解释的那样工作。你在这里的代码块中看不到，所以我插入了一条注释来指示U+034F的位置：
o͏<!--U+034F--><span>̄
但是，这需要客户端或服务器端的渲染器用变音符号处理每个字母，然后将其分开并插入span和U+034F。当您不想将文本加倍时，这可能是一个解决方案（如基于 CSS 的解决方案中所建议的那样）上面提到的页面 https://stackoverflow.com/questions/23537441/how-to-display-accents-over-words-with-different-colors-in-html-css).
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
