如何在HTML/CSS中显示不同颜色的单词的重音？

Question

我有一些这样的文字,以HTML格式显示:

p?ng?p?ng?qiú?p?i

如何更改文本颜色,使文本为蓝色,而上面的重音为红色？

Answer 1

CSS将字母视为一个整体,因此它只能是1种颜色.

这是一个hacky版本:

这仅在内容保持不变时才有效.

span{
  font-size:48px;
  color:blue;
  position:relative;
}
span:after{
  content:'p?ng?p?ng?qiú?p?i';
  position:absolute;
  left:0;
  height:18px;
  overflow:hidden;
  z-index:9999;
  color:red;
  top:-5px;
}

<span>p?ng?p?ng?qiú?p?i</span>

就个人而言,我不会用这个.这是一种可怕的做法.

Answer 2

我认为您没有使用纯 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 必须进行一些更改（可以视为错误）导致无法正常工作。特别是您会看到在打开和关闭检查器窗格后 HTML 输出将正确呈现）。

为了解决这个问题，我只是添加了一个简单的 hack（通过删除元素并重新插入以强制正确应用 CSS 规则）。上面的代码几乎保持不变。

只需附加此脚本：

.each(function(){
   $(this).replaceWith($(this).clone(true));
});

更新演示