我刚刚玩了@Arbel的解决方案：

var textToHalfStyle=$（'.textToHalfStyle'）.text（）；var textToHalfStyleChars=textToHalf-Style.split（“”）；$（'.textToHalfStyle'）.html（''）；$.each（textToHalfStyleChars，函数（i，v）{$（'.textToHalfStyle'）.append（'<span class=“halfStyle”data content=“'+v+'”>'+v+'</span>'）；});正文{背景色：黑色；}.text转换为半样式{显示：块；边距：200px 0 0；文本对齐：居中；}半样式{字体系列：'Libre Baskerville'，衬线；位置：相对；显示：内联块；宽度：1；字体大小：70px；颜色：黑色；溢出：隐藏；空白：pre；文本阴影：1px 2px 0白色；}半样式：之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：属性（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js“></script><span class=“textToHalfStyle”>Dr。Jekyll和M.Hide</span>

是的，您可以只使用一个字符和CSS：

http://jsbin.com/rexoyice/1/

h1小时{显示：内联块；边距：0；/*用于演示片段*/线条高度：1em；/*用于演示片段*/字体系列：helvetica，arial，sans-serif；字号：粗体；字体大小：300px；背景：线性梯度（向右，#7db9e8 50%，#1e5799 50%）；背景剪辑：文本；-webkit文本填充颜色：透明；}<h1>X（X）</h1>

从视觉上看，所有使用两个字符的示例（无论是通过JS、CSS伪元素还是HTML）看起来都很好，但请注意，所有这些都会向DOM添加内容，这可能会导致可访问性——以及文本选择/剪切/粘贴问题。

另一种仅使用CSS的解决方案（如果您不想编写特定于字母的CSS，则需要数据属性）。这一款更全面（已测试IE 9/10、Chrome最新版本和FF最新版本）

跨度{位置：相对；颜色：rgba（50,50200,0.5）；}跨度：之前{content:attr（数据字符）；位置：绝对；宽度：50%；溢出：隐藏；颜色：rgb（50,50200）；}<span data char=“X”>X</span>

所有解决方案都是通过拆分字母并将其包装在<span>中来实现的。我们不必将字母分成两种情况：

如果字体是单空格。如果使用垂直布局。

第二部分{字体大小：80px；字号：粗体；颜色：透明；填充：0；边距：0；背景：线性梯度（90度，rgb（34，67，143）0%50%，#409FBF 50%）；背景剪辑：文本；-webkit背景剪辑：文本；}一{字体系列：'Nova Mono'；背景重复：repeat-x；背景大小：45px；}.2个{字体系列：'Gideon Roman'；写入模式：垂直lr；文本方向：直立；字母间距：-35px；高度：500px；}<!-- 获取字体--><link rel=“preconnect”href=“https://fonts.googleapis.com"><link rel=“preconnect”href=“https://fonts.gstatic.com“交叉原点><link href=“https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap“rel=”stylesheet“><link href=“https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap“rel=”stylesheet“><div id=“one”class=“one”>X-RAY冬季</div><div class=“two”>最小</div>

字体不可用时的预期输出：

我知道背景剪辑和渐变的使用已经在其他答案中得到了证明，只不过是在不需要拆分字母的情况下。

这里是画布上的一个丑陋的实现。我尝试了这个解决方案，但结果比我预期的更糟，所以无论如何，它还是在这里。

$（“div”）.each（函数）{var CHARS=$（this）.text（）.split（“”）；$（this）.html（“”）；$.each（CHARS，函数（索引，字符）{var canvas=$（“<canvas/>”）.css（“宽度”，“40px”）.css（“高度”，“40px”）.get（0）；$（“div”）.append（画布）；var ctx=canvas.getContext（“2d”）；var gradient=ctx.createLinearGradient（0，0，130，0）；gradient.addColorStop（“0”，“蓝色”）；gradient.addColorStop（“0.5”，“蓝色”）；gradient.addColorStop（“0.51”，“红色”）；gradient.addColorStop（“1.0”，“红色”）；ctx.font=“130pt Calibri”；ctx.fillStyle=渐变；ctx.fillText（字符，10，130）；});});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div>示例文本</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);
  }
}