我有一些这样的文本，以 HTML 格式显示：
pīngpāngqiúpāi
如何更改文本颜色，使文本为蓝色而上面的重音为红色？
【问题讨论】：
:afterheight 和overflow:hidden;
在这里扩展其他解决方案，您实际上可以实现一个不依赖于仅将变音符号放置在字母顶部的解决方案。
您可以通过简单地重叠两个版本（with 和 without 变音符号）并使用text-shadow 来覆盖明显出现在这些版本中的抗锯齿出血来做到这一点情况。
文本边缘的抗锯齿颜色渗色示例。注意黑色字符周围柔和的红色光晕/辉光。
如果您想让带变音符号的文本“变灰”，您也可以将它们设置为不同的不透明度，从而限制出血效果。
一些注意事项适用：
如果您想为i 的圆点着色，您需要U+0131 LATIN SMALL LETTER
DOTLESS I 字符（参见«Spinal Tap» 示例）
目前关于这个问题的所有解决方案都依赖于这样一个事实，即在添加或删除变音符号时字符不会改变其度量。这并不总是正确的，例如i 和ï（参见最后一个示例）。
有时变音符号会附加到字母的主要形状，例如ç。这严重破坏了我们的text-shadow 技巧。
使用text-shadow 并不是一个完美的解决方案。它要求背景同时是纯色并且在设计时是已知的。
在下面的 sn-p 中，我还使用 CSS 自定义属性（也称为 CSS 变量），以便不必在 text-shadow 中重复背景颜色，悬停时您可以看到删除 text-shadow 时会发生什么.
:root {
--body-bg: white;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
font-family: sans-serif;
font-size: 30px;
flex-direction: column;
background: var(--body-bg);
}
.setting {
font-size: 14px;
display: flex;
align-items: baseline;
}
body>* {
padding: 10px;
}
[data-with-diacritics] {
display: inline-block;
position: relative;
text-shadow: -1px -1px 0px var(--body-bg), 1px -1px 0px var(--body-bg), -1px 1px 0px var(--body-bg), 1px 1px 0px var(--body-bg);
}
[data-with-diacritics]::before {
content: attr(data-with-diacritics);
position: absolute;
color: red;
}
[data-with-diacritics]>span {
position: relative;
}
[data-with-diacritics]:hover {
text-shadow: none;
outline: 1px solid red;
}<span data-with-diacritics="Spın̈al Tap">
<span>Spınal Tap</span>
</span>
<span data-with-diacritics="España">
<span>Espana</span>
</span>
<span data-with-diacritics="Français">
<span>Francais</span>
</span>
<span data-with-diacritics="äëïiöü ãõ">
<span>aeııou ao</span>
</span>【讨论】：
我认为您没有任何使用纯 CSS 的干净解决方案。正如 BeatAlex 所给出的，您最好实现一些脚本来完美地解决您的问题。事实上，我曾想过使用 2 个叠加层来创建您想要的效果，但与 BeatAlex 的想法不同的是，顶部叠加层将是重音字母的非重音版本。它要求我们将重音字母转换为相应的非重音字母。但是我发现在这种情况下使用overflow:hidden 的想法非常好。我想借用这个想法并实现一个实现解决方案的脚本（完全可用）。这个想法是您只需要找到所有重音字母（在原始文本中），用span 元素包装每个字母，然后将样式应用于这些跨度元素。我想提一下我没有实现正确的代码来过滤/检测所有可能的重音字母，最后这仍然是你完成它的开始。代码详情：
CSS：
.distinct-accent {
font-size:30px;
color:blue;
}
.with-accent {
position:relative;
display:inline-block;
}
.with-accent:before {
content:attr(data-content);
position:absolute;
left:0;
top:0;
height:0.4em;
width:100%;
padding-right:0.1em;
color:red;
overflow:hidden;
}
JS：
$(".distinct-accent").html(function(i, oldhtml){
var newhtml = "";
for(var i = 0; i < oldhtml.length; i++){
var nextChar = "";
var code = oldhtml.charCodeAt(i);
if((code > 64 && code < 90) ||
(code > 96 && code < 123) || code == 32) nextChar = oldhtml[i];
else {
nextChar = "<span class='with-accent' data-content='" + oldhtml[i] + "'>" + oldhtml[i] + "</span>";
}
newhtml += nextChar;
}
return newhtml;
});
更新：
注意上述代码之前在所有基于 webkit 的浏览器（例如 Chrome）中运行良好，但现在由于未知原因无法运行（content:attr 无法通过设置 innerHtml 正确应用于动态更新的内容）。一定是对 Chrome 进行了一些更改（这可以被视为错误）导致无法正常工作。特别是您会看到在打开和关闭 inspector 窗格后 HTML 输出将正确呈现）。
为了解决这个问题，我只是添加了一个简单的技巧（通过删除元素并重新插入以强制正确应用 CSS 规则）。上面的代码几乎保持不变。
只需附加此脚本：
.each(function(){
$(this).replaceWith($(this).clone(true));
});
【讨论】：
CSS 将字母视为一个整体，因此它只能是一种颜色。
这是一个hacky版本：
这只有在内容保持不变的情况下才有效。
span{
font-size:48px;
color:blue;
position:relative;
}
span:after{
content:'pīngpāngqiúpāi';
position:absolute;
left:0;
height:18px;
overflow:hidden;
z-index:9999;
color:red;
top:-5px;
}<span>pīngpāngqiúpāi</span>就个人而言，我不会使用它。这是一种可怕的做法。
【讨论】：