Question

我有一些这样的文字，以HTML格式显示：

pīngpāngqiúpāi

如何更改文字颜色，使文字为蓝色，而上面的重音是红色？

Answer 1

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

这是一个hacky版本：

仅当内容保持不变时才会有效。

＆＃13;

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;
}

＆＃13;

<span>pīngpāngqiúpāi</span>

＆＃13;

就个人而言，我不会使用它。这是一种可怕的做法。

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;
});

Demo.

<强>更新：请注意，上述代码在所有基于webkit的浏览器（例如Chrome）中都运行良好，但现在它不能用于未知原因（content:attr通过设置innerHtml无法正确应用动态更新的内容）。必须对Chrome进行一些更改（可以将其视为错误），导致其无法正常工作。特别是在打开和关闭检查器窗格后，您将看到HTML输出将正确呈现。

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

只需附加此脚本：

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

<强> Updated Demo

Answer 3

在这里扩展其他解决方案，您实际上可以实现一个不依赖变音符号的解决方案，而仅将其放在字母的顶部。

您可以通过简单地将两个版本（带有变音符号的和和不包含的字母）重叠，并使用text-shadow来掩盖明显发生的抗混叠出血来实现此目的。在这种情况下。

示例抗锯齿颜色渗入文本边缘。注意黑色字符周围柔和的红色光晕/发光效果。

如果您希望变音符号“变灰”，也可以将带有变音符号的文本设置为不同的不透明度，从而限制出血效果。

有一些注意事项：

如果要给i的点着色，则需要U+0131 LATIN SMALL LETTER DOTLESS I字符（请参见“ Spinal Tap”示例）
当前针对此问题的所有解决方案都依赖于以下事实：添加或删除变音符号时，角色不会更改其度量标准。并非总是如此，例如使用i和ï（请参见最后一个示例）。
有时，变音符号被附加到字母的主要形状上，例如ç。这严重破坏了我们的text-shadow技巧。
使用text-shadow并不是一个完美的解决方案。它要求背景必须同时是纯色并且在设计时就已知。

在以下代码段中，我也使用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>

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

3 个答案:

Demo.