我能得到的最接近：

$（函数）{$（'span'）.width（$（'span'）.wwidth（）/2）；$（'span:nth child（2）'）.css（'text-indent'，-$（'span'）.width（））；});正文{字体系列：arial；}跨度{显示：内联块；溢出：隐藏；}跨度：第n个子级（2）{颜色：红色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><span>X</span><span>X</span>

演示：http://jsfiddle.net/9wxfY/2/

以下是仅使用一个跨度的版本：http://jsfiddle.net/9wxfY/4/

我能得到的最接近：

$（函数）{$（'span'）.width（$（'span'）.wwidth（）/2）；$（'span:nth child（2）'）.css（'text-indent'，-$（'span'）.width（））；});正文{字体系列：arial；}跨度{显示：内联块；溢出：隐藏；}跨度：第n个子级（2）{颜色：红色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><span>X</span><span>X</span>

演示：http://jsfiddle.net/9wxfY/2/

以下是仅使用一个跨度的版本：http://jsfiddle.net/9wxfY/4/

利用背景剪辑的一个不错的解决方案：文本支持：http://jsfiddle.net/sandro_paganotti/wLkVt/

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

有限的CSS和jQuery解决方案

我不知道这个解决方案有多优雅，但它将所有事情都削减了一半：http://jsfiddle.net/9wxfY/11/

否则，我为您创建了一个很好的解决方案。。。您需要做的就是为HTML设置以下内容：

请查看截至2016年6月13日的最新且准确的编辑：http://jsfiddle.net/9wxfY/43/

至于CSS，它非常有限。。。您只需将其应用于：第n个孩子（偶数）

$（函数）{var$hc=$（'.half color'）；var str=$hc.text（）；$hc.html（“”）；变量i=0；var字符；var dupText；而（i<str.length）{chars=str[i]；如果（chars==“”）chars=“”；dupText=“<span>”+字符+“</span>”；var firstHalf=$（dupText）；var secondHalf=$（dupText）；$hc.append（前半部分）$hc.append（secondHalf）var width=firstHalf.width（）/2；firstHalf.width（宽度）；secondHalf.css（'text-indent'，-width）；i++；}});半色跨度{字体大小：2em；显示：内联块；溢出：隐藏；}半色跨度：第n个子级（偶数）{颜色：红色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script>这是一个句子</div>

这是一个仅针对整行文本的CSS解决方案，而不仅仅是字符元素。

第二部分{位置：相对；顶部：2米；高度：2米；文本转换：全宽；}div：之前，div:之后{content:attr（数据内容）；位置：绝对；顶部：0；右：0；底部：0；左：0；}div:之后{颜色：红色；/*单个字符的掩码。通过重复此掩码，所有字符串都将被掩码*/-webkit掩码图像：线性渐变（向右，透明0，透明.5em，白色.5em，白1em）；-webkit掩码重复：repeat-x；/*向右重复面罩*/-webkit掩码大小：1em；/*单个字符的相对宽度*//*非供应商掩码设置*/遮罩图像：线性渐变（向右，透明0，透明.5em，白色.5em，白1em）；掩码重复：repeat-x；掩模尺寸：1em；}/*演示目的*/input[name=“fontSize”]：第一个类型：checked ~ div{字体大小：1em；}input[name=“fontSize”]：第一个类型+input:checked ~ div{字体大小：2em；}input[name=“fontSize”]：第一个类型+input+input：checked ~ div{字体大小：3em；}字体大小：<input type=“radio”name=“fontSize”value=“1em”><input type=“radio”name=“fontSize”value=“2em”checked><input type=“radio”name=“fontSize”value=“3em”><div data content=“仅限CSS的解决方案…”></div><div data content=“在Firefox上试用！”></div>

其想法是为每个字符应用一个水平CSS掩码，隐藏其前半部分[0-0.5em]，并显示后半部分[0.5em-1em]。

掩码的宽度为掩码大小：1em，以匹配字符串中第一个字符的宽度。通过使用掩码repeat:repeat-x，相同的掩码将应用于第二个、第三个字符，依此类推。

我原以为使用单格字体可以解决使用相同宽度字母的问题，但我错了。相反，我通过使用文本转换解决了这个问题：我相信，不幸的是，只有Firefox才支持全宽度。

使用相对单位em允许设计根据字体大小进行放大/缩小。

适用于所有浏览器的Vanilla JavaScript解决方案

如果Firefox不是一个选项，那么使用此脚本进行救援。

它通过为每个字符插入子跨度来工作。在每个span中，从字母的宽度（即span元素的宽度）[0%-50%]和[50%-100%]处放置一个非重复CSS掩码。

这样，我们就不再有使用相同宽度字符的限制。

常量dataElement=document.getElementById（“data”），content=dataElement.textContent，zoom=功能（fontSize）{dataElement.style['font-size']=fontSize+'em'；};while（dataElement.firstChild）{dataElement.firstChild.remove（）}对于（var i=0；i<content.length；++i）{常量spanElem=document.createElement（'span'），ch=含量[i]；spanElem.setAttribute（'data-ch'，ch）；spanElem.appendChild（document.createTextNode（ch==''？'\u00A0'：ch））；data.appendChild（spanElem）；}#数据{位置：相对；顶部：2米；高度：2米；字体大小：2em；}#数据跨度{显示：内联块；位置：相对；颜色：透明；}#数据跨度：之前，#数据范围：之后{content:attr（数据ch）；显示：内联块；位置：绝对；顶部：0；右：0；底部：0；左：0；文本对齐：居中；颜色：初始；}#数据范围：之后{颜色：红色；-webkit掩码图像：线性渐变（向右，透明0，透明50%，白色50%，白色100%）；掩模图像：线性梯度（向右，透明0，透明50%，白色50%，白色100%）；}字体大小：<input-type=“range”min=1 max=4 step=0.05 value=2 oninput=“zoom（this.value）”onchange=“zoom（this.value）”>＜div id=“data”＞后备解决方案。。。对于所有浏览器</div>

FWIW，这是我对仅使用CSS的看法：http://codepen.io/ricardozea/pen/uFbts/

几个注意事项：

我这样做的主要原因是为了测试自己，看看我是否能够完成一半角色的造型，同时为OP提供一个有意义的答案。我知道，这不是一个理想的或最具扩展性的解决方案，这里的人提出的解决方案对于“现实世界”场景要好得多。我创建的CSS代码是基于我脑海中的第一个想法和我自己解决这个问题的方法。我的解决方案仅适用于对称字符，如X、A、O、M。**它不适用于非对称字符，例如B、C、F、K或小写字母。**然而，这种方法用不对称的字符创造了非常有趣的“形状”。尝试将CSS中的X改为K或小写字母，如h或p：）

HTML

<span class="half-letter"></span>

SCSS

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}