更改单词中一个字符的颜色而不更改单词的字距调整属性？答案

【问题标题】：Changing the color of one character within a word without changing the kerning properties of the word?更改单词中一个字符的颜色而不更改单词的字距调整属性？
【发布时间】：2017-10-14 12:53:40
【问题描述】：

假设我们有以下元素：

<div>STACKOVERFLOW</div>

我们想让A 变成红色，但不改变单词的字距调整属性。换句话说，我们希望单词的显示方式与之前完全相同。这里有一个类似的问题：

change-color-of-one-character-in-a-text-box-html-css

但是，使用 span 元素会更改单词的字距调整属性（在 A 前面添加更多空格）。

这是referenced SO question中的jsfiddle截图

如您所见，span 元素似乎增加了一点空间。

更新

我将添加一个屏幕截图和一些代码来说明我的意思。如果您在屏幕截图中查看单词ICON，它会被标记为这样（并且跨度会导致添加额外的空间）：

    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
    <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
    <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span></h1>

div { font-size: 3em; background: blue; display: inline-block; }
span { color: red; }

<div>STACKOVERFLOW</div>
<div>ST<span>A</span>CKOVERFLOW</div>
<img src="https://i.stack.imgur.com/EjnDF.png">

cmets 颜色实用程序中的每个请求来自 SuperflyCSS Color Utilities

字体工具来自SuperflyCSS Font Utilities

而u-text-uppercase 实用程序来自于字体实用程序来自SuperflyCSS Format Utilities

另一个更新

谢谢你们 - 正如接受的答案中提到的那样，关键是将  元素保持在同一行。当我这样做时，结果如下：

【问题讨论】：

有趣，以前从未注意到。 jsfiddle.net/qLft5yt7 不知道是否有办法解决这个问题，除非你想开始摆弄负边距和幻数......也许一些更晦涩/新/浏览器特定的字体渲染属性可能会有所帮助以某种方式。
刚刚在 Firefox 和 Chromium 中尝试过 @CBroe fiddle；注意到绝对零字距调整：这两行在我的机器上是逐像素相同的，即使在A 之后为每个字符添加跨度也是如此。您可以添加此字距调整问题的屏幕截图吗？我想知道是否有多个变量影响渲染...
我将发布正在使用的实用程序库的链接。
@Ole 在一行中不保留span 也是可能的。但如你所愿......:)
@ankitapatel 您在第一个答案中基本上是正确的，跨度在同一行。伙计们在这里付出了很多努力，所以请给他们一些支持。

标签： html css

【解决方案1】：

你只需要保持一行！

你可以使用：

IconUtility Tests

或：

Icon

或者您可以只在父级上使用font-size: 0 并重置其子级字体大小或使用float: left 和&nbsp;

.third {  font-size: 0;  }

.third span {  font-size: 16px;  }

.fourth span {
  float: left;
}

<strong>First:</strong><br>
<span class="first">Ic<span>o</span>n</span> <span>Utility Tests</span>

<br><br>
<strong>Second:</strong><br>

<span class="second">
<span>Ic</span>
<span>o</span>
<span>n</span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Third:</strong><br>

<span class="third">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Fourth:</strong><br>

<span class="fourth">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>&nbsp;Utility Tests</span>
</span>

【讨论】：

谢谢@chrishappy（用户 emoji 表情说明了一切 :)） - 我认为它仍然增加了一点空间，但在我的演示中并不明显 - 所以我们会继续使用它。我在问题中发布了我的原始实验，以便每个人都可以大致了解会发生什么。
对于我的用例，我认为它根本不明显，但在并排的 JSFiddle 中，它使 T 和 A 之间的原始距离加倍 - 但有负边距和所有其他伟大的答案在这里我们应该涵盖这个！再次感谢大家！

【解决方案2】：

我认为这应该对您有所帮助。请试试这个。为了避免多余的空间，我使用了font-size:0 到h1 标签，因为span 标签采用了默认属性display:inline-block。

h1{
  text-transform:uppercase;
  font-weight:normal;
  font-size:0;
}
.u-text-color-md-pink-a200{
  color:#FF4081;
}
.u-font-weight-900{
  font-weight:bold;
}
h1 span{
  font-size:30px;
}

<h1>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
  <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
  <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>
</h1>

【讨论】：

【解决方案3】：

您仍然可以使用，并对其应用负边距。

#one{
  color:#ff0000;
}
#two{
  color:#ff0000;
  margin:0 -0.04em;
}
div { 
  font-size: 3em; background: blue; display: inline-block; 
}

<!--Old Span-->
<div>ST<span id="one">A</span>CKOVERFLOW</div>
<!--New Span-->
<div>ST<span id="two">A</span>CKOVERFLOW</div>
<!--Original-->
<div>STACKOVERFLOW</div>

【讨论】：

很好的提示 - 我会记住这一点 - 实际上可能会在格式 superflycss 包中放置一些负边距实用程序。