在一个单词中更改一个字符的颜色而不改变该单词的kerning属性？

Question

假设我们有以下元素：

<div>STACKOVERFLOW</div>

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

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

但是，使用span元素会改变单词的kerning属性(在A前面添加更多的空间)。

这是一张被引用的问题中弹琴的截图

​

​

如您所见，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">

​

注释颜色实用程序中的每个请求都来自SuperflyCSS彩色实用程序

字体实用程序来自SuperflyCSS字体实用程序

u-text-uppercase实用程序来自于来自SuperflyCSS格式实用程序的字体实用程序

另一次更新

正如公认的答案中提到的，谢谢各位--关键是保持<span>元素保持在同一行中。当我这样做的时候，这就是结果：

​

​

Answer 1

你只需要把它放在一条线上！

你可以用：

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

或者：

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

或者您只需在父级上使用font-size: 0 &重置其子级字体大小，或者使用float: left和 。

​

.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>

​

Answer 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>

​

Answer 3

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

​

#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>

​