是否可以将 CSS 应用于字符的一半？

Posted

技术标签:

【中文标题】是否可以将 CSS 应用于字符的一半？【英文标题】：Is it possible to apply CSS to half of a character? 【发布时间】：2014-06-27 11:29:17 【问题描述】：

我在寻找什么：

一种设置一半字符样式的方法。 （在这种情况下，一半的字母是透明的）

我目前搜索和尝试的内容（没有运气）：

设置半个字符/字母样式的方法 使用 CSS 或 javascript 设置字符的一部分 将 CSS 应用于 50% 的字符

以下是我想要获得的示例。

是否存在 CSS 或 JavaScript 解决方案，或者我将不得不求助于图像？我不想走图像路线，因为此文本最终会动态生成。

更新：

既然很多人问我为什么要设计半个角色的样式，这就是原因。我的城市最近花了 250,000 美元为自己定义一个新的“品牌”。这 logo 是他们想出的。许多人抱怨简单和缺乏创造力，并继续这样做。我的目标是想出这个 website 作为一个笑话。输入“Halifax”，你就会明白我的意思了。

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。 他们问“为什么”，因为他们想知道为什么你会使用 CSS 而不是使用 SVG 或图像编辑器。与有关其徽标的业务决策无关。根据您指向他们徽标的链接，您为什么不直接裁剪 X？ 在将其中一些方法应用于您的文本之前，请考虑可访问性。下面提到的方法非常令人沮丧，因为它们不能提高视力差、学习障碍、失语、阅读障碍或成人识字率低的人的易读性和可读性。有需要遵循的指导方针，甚至谷歌宣布将根据网站对 WCAG 规则的遵守情况开始对网站进行排名。很容易与那些使用工具作为斧头的人进行测试。如果使用图像/svg 代替，则两者都需要替代文本来传达所传达的信息。 【参考方案1】：

Now on GitHub as a Plugin!

随意分叉和改进。

Demo | Download Zip | Half-Style.com（重定向到 GitHub）

纯 CSS 用于单个字符 JavaScript 用于跨文本或多个字符的自动化 为盲人或视觉上的屏幕阅读器保留文本可访问性 受损

第 1 部分：基本解决方案

演示： http://jsfiddle.net/arbel/pd9yB/1694/

这适用于任何动态文本或单个字符，并且都是自动化的。您需要做的就是在目标文本上添加一个类，剩下的就交给我们了。

此外，为盲人或视障者的屏幕阅读器保留了原始文本的可访问性。

单个字符的解释：

纯 CSS。您需要做的就是将.halfStyle 类应用于每个包含您想要半样式化的字符的元素。

对于每个包含字符的 span 元素，您可以创建一个数据属性，例如这里data-content="X"，并在伪元素上使用content: attr(data-content);，因此.halfStyle:before 类将是动态的，您不需要为每个实例硬编码。

任何文字的解释：

只需将textToHalfStyle 类添加到包含文本的元素即可。

// jQuery for automated mode
jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) 
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    

    // Write to DOM only once
    $el.append(output);
  );
);
.halfStyle 
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */


.halfStyle:before 
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(JSFiddle demo)

第 2 部分：高级解决方案 - 左右独立部件

使用此解决方案，您可以单独和独立地设置左右部分的样式。

一切都一样，只有更高级的 CSS 才能发挥作用。

jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) 
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        

        // Write to DOM only once
        $el.append(output);
    );
);
.halfStyle 
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */


.halfStyle:before  /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */


.halfStyle:after  /* creates the right part */
    display: block;
    direction: rtl; /* very important, will make the width to start from right */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(JSFiddle demo)

第 3 部分：混合搭配和改进

现在我们知道什么是可能的，让我们创建一些变体。

-水平半部分

无文字阴影：

每个半部分独立的文本阴影的可能性：

// jQuery for automated mode
jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) 
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        

        // Write to DOM only once
        $el.append(output);
    );
);
.halfStyle 
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */


.halfStyle:before  /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #af0; /* for demo purposes */


.halfStyle:after  /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(JSFiddle demo)

-垂直 1/3 零件

无文字阴影：

每个 1/3 部分独立的文本阴影的可能性：

// jQuery for automated mode
jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) 
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    

    // Write to DOM only once
    $el.append(output);
  );
);
.halfStyle  /* base char and also the right 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */


.halfStyle:before  /* creates the left 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */


.halfStyle:after  /* creates the middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(JSFiddle demo)

-水平 1/3 零件

无文字阴影：

每个 1/3 部分独立的文本阴影的可能性：

// jQuery for automated mode
jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) 
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    

    // Write to DOM only once
    $el.append(output);
  );
);
.halfStyle  /* base char and also the bottom 1/3 */
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent;
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
  color: #f0f;
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */


.halfStyle:before  /* creates the top 1/3 */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 33.33%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #fa0; /* for demo purposes */


.halfStyle:after  /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #af0; /* for demo purposes */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(JSFiddle demo)

-@KevinGranger 改进的HalfStyle

// jQuery for automated mode
jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) 
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    

    // Write to DOM only once
    $el.append(output);
  );
);
body 
    background-color: black;


.textToHalfStyle 
    display: block;
    margin: 200px 0 0 0;
    text-align: center;


.halfStyle 
    font-family: 'Libre Baskerville', serif;
    position: relative;
    display: inline-block;
    width: 1;
    font-size: 70px;
    color: black;
    overflow: hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;


.halfStyle:before 
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: white;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(JSFiddle demo)

-@SamTremaine对HalfStyle的PeelingStyle改进 

// jQuery for automated mode
jQuery(function($) 
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) 
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) 
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    

    // Write to DOM only once
    $el.append(output);
  );
);
.halfStyle 
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);


.halfStyle:before  /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

（JSFiddle demo 和samtremaine.co.uk）

第 4 部分：准备生产

可以在同一页面上的所需元素上使用自定义的不同 Half-Style 样式集。 您可以定义多个样式集并告诉插件使用哪一个。

插件在目标.textToHalfStyle 元素上使用数据属性data-halfstyle="[-CustomClassName-]" 并自动进行所有必要的更改。

因此，只需在包含文本的元素上添加textToHalfStyle 类和数据属性data-halfstyle="[-CustomClassName-]"。该插件将完成剩下的工作。

此外，CSS 样式集的类定义与上面提到的 [-CustomClassName-] 部分匹配并链接到 .halfStyle，因此我们将拥有 .halfStyle.[-CustomClassName-]

jQuery(function($) 
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) 
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) 
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    );
);
/* start half-style hs-base */

.halfStyle.hs-base 
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */


.halfStyle.hs-base:before 
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow: hidden;
    color: #f00; /* for demo purposes */


/* end half-style hs-base */


/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third  /* base char and also the bottom 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent;
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */


.halfStyle.hs-horizontal-third:before  /* creates the top 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */


.halfStyle.hs-horizontal-third:after  /* creates the middle 1/3 */
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */


/* end half-style hs-horizontal-third */


/* start half-style hs-PeelingStyle, by user SamTremaine on ***.com */

.halfStyle.hs-PeelingStyle 
  position: relative;
  display: inline-block;
  font-size: 68px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: pre;
  transform: rotate(4deg);
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);


.halfStyle.hs-PeelingStyle:before  /* creates the left part */
  display: block;
  z-index: 1;
  position: absolute;
  top: -0.5px;
  left: -3px;
  width: 100%;
  content: attr(data-content);
  overflow: hidden;
  pointer-events: none;
  color: #FFF;
  transform: rotate(-4deg);
  text-shadow: 0px 0px 1px #000;


/* end half-style hs-PeelingStyle */


/* start half-style hs-KevinGranger, by user KevinGranger on ***.com*/

.textToHalfStyle.hs-KevinGranger 
  display: block;
  margin: 200px 0 0 0;
  text-align: center;


.halfStyle.hs-KevinGranger 
  font-family: 'Libre Baskerville', serif;
  position: relative;
  display: inline-block;
  width: 1;
  font-size: 70px;
  color: black;
  overflow: hidden;
  white-space: pre;
  text-shadow: 1px 2px 0 white;


.halfStyle.hs-KevinGranger:before 
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  color: white;


/* end half-style hs-KevinGranger
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

(JSFiddle demo)

【讨论】：

评论不用于扩展讨论；此对话是moved to chat。 这很酷。值得注意的是，这种技术会破坏自动换行、空白和字符间距 CSS。【参考方案2】：

我刚刚完成了插件的开发，大家都可以使用了！希望你会喜欢它。

在 GitHub 上查看项目 - 查看项目 Website。 （这样你就可以看到所有的拆分样式）

用法

首先，确保包含jQuery 库。获取最新 jQuery 版本的最佳方法是更新您的 head 标签：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

下载文件后，确保将它们包含在您的项目中：

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

标记

您所要做的就是指定类 splitchar ，然后将所需的样式分配给包裹文本的元素。例如

<h1 class="splitchar horizontal">Splitchar</h1>

所有这些都完成后，只需确保在您的文档就绪文件中调用 jQuery 函数，如下所示：

$(".splitchar").splitchar();

自定义

为了使文本看起来完全符合您的要求，您所要做的就是像这样应用您的设计：

.horizontal  /* Base CSS - e.g font-size */ 
.horizontal:before  /* CSS for the left half */ 
.horizontal:after  /* CSS for the right half */

而已！现在你已经设置好了Splitchar 插件。更多信息请访问http://razvanbalosin.com/Splitchar.js/。

【讨论】：

到目前为止，您的解决方案对于多个字符来说是最容易实现的，但仍然不是 100%。 @MathewMacLean emisfera 必须有答案，对吧？ 这有文本换行问题，即使在最新的小提琴中也会出现。当一个字符换行时，它基本上分成了两个。不过，应该是一个微不足道的修复。 不要依赖 jquery-latest.min.js，如果 jQuery 更新并且插件不能与较新的插件一起使用，它会使您的网站在没有警告的情况下崩溃。相反：使用特定版本并在更新时检查兼容性。 您可能想要编辑您的答案以不建议使用 jquery-latest.js。正如@NielsBom 所提到的，过去它可能会在更新时破坏您的网站。自 2014 年 7 月以来，它不会这样做，但那是因为 it is locked at version 1.11.1 并且永远不会再次更新。【参考方案3】：

是的，你可以只用一个字符并且只用 CSS：

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

h1 
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  background-clip: text;
  -webkit-text-fill-color: transparent;

&lt;h1&gt;X&lt;/h1&gt;

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

【讨论】：

@MathewMacLean 如果只有 IE 死掉并且 Firefox 开始使用 Webkit，我们的工作就会轻松很多。 :) @MattHarrison 嗯。好吧，我猜它不仅仅是 not webkit！ :) WebKit 有呈现几乎 IE6/IE7 级别的怪异错误的历史（你甚至可以说 Safari 和 Chrome 是现代网络的 IE6），并且行为方式与没有特殊原因的标准。 IE 自第 9 版以来已经好多了，所以虽然古老的版本应该已经死了，但我看不出有任何理由憎恨它的最新版本。而且我当然不明白为什么人们支持 WebKit/Blink 单一文化的想法（这里的 cmets 可能是在开玩笑，但我听说过有人认真相信它）。 话虽如此，background-clip: text 非常棒，他们应该考虑将它（或类似 text-decoration-background 的东西）用于第 4 级模块。 是的，如果blink/webkit 死掉而现代IE+FF 渲染引擎幸存下来，我会更高兴。这并不是说 chrome 的其余部分不好，只是它的渲染几乎是当今最糟糕的。【参考方案4】：

JSFiddle DEMO

我们将只使用 CSS 伪选择器！

这种技术适用于动态生成的内容以及不同的字体大小和宽度。

HTML：

<div class='split-color'>Two is better than one.</div>

CSS：

.split-color > span 
    white-space: pre-line;
    position: relative;
    color: #409FBF;


.split-color > span:before 
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;

要包装动态生成的字符串，您可以使用如下函数：

// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) 
  var output = [];
  str.split('').forEach(function(letter) 
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

    output.push(wrapper.outerHTML);
  );

  return output.join('');


// Replace the original text with the split-color text
window.onload = function() 
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;
    
    el.innerHTML = wrapString(txt);

【讨论】：

【参考方案5】：

这可能无关紧要，也可能不相关，但前一段时间，我创建了一个 jQuery 函数，它做同样的事情，但水平。

我称它为“Stripex”对于'stripe'+'text'，演示：http://cdpn.io/FcIBg

我不是说这是任何问题的解决方案，而是我已经尝试过将css应用到半个字符上，但是横向，所以想法是一样的，实现可能很可怕，但它确实有效。

啊，最重要的是，我玩得很开心！

【讨论】：

@LukyVj 我更新了你的函数，将pointer-events:none 添加到&amp;:nth-child(2) - &amp;:nth-child(5)。这使得文本只能突出显示一次，并且您只能获得一份副本。你可以在这里看到它：codepen.io/anon/pen/upLaj 请将minimal reproducible example 添加到答案本身，而不是链接到第三方网站。当该链接失效时，答案将失去它所具有的价值。目前这在技术上是“NAA”（不是答案）。【参考方案6】：

这里是画布中的一个丑陋的实现。我尝试了这个解决方案，但结果比我预期的要差，所以还是这样。

$("div").each(function() 
  var CHARS = $(this).text().split('');
  $(this).html("");
  $.each(CHARS, function(index, char) 
    var canvas = $("<canvas />")
      .css("width", "40px")
      .css("height", "40px")
      .get(0);
    $("div").append(canvas);
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop("0", "blue");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("0.51", "red");
    gradient.addColorStop("1.0", "red");
    ctx.font = '130pt Calibri';
    ctx.fillStyle = gradient;
    ctx.fillText(char, 10, 130);
  );
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>

【讨论】：

顺便说一句，您也可以将0.5 用于红色停止。【参考方案7】：

如果你对此感兴趣，那么 Lucas Bebber 的 Glitch 是一个非常相似且超酷的效果：

使用简单的 SASS Mixin 创建，例如

.example-one 
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);

更多详情请访问Chris Coyer's CSS Tricks 和Lucas Bebber's Codepen page

【讨论】：

【参考方案8】：

我能得到的最接近的：

$(function()
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
);
body
  font-family: arial;

span
  display: inline-block;
  overflow: hidden;

span:nth-child(2)
  color: red;

<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() 只返回它找到的第一个跨度的宽度；它必须是你为每一对做的事情。这给了我一个想法...... 这与在 jsfiddle.net/9WWsd 上找到的 epascarello 的示例非常相似。正如我告诉他的那样，您的示例是朝着正确方向迈出的一步，但是，在更大范围内使用将是一场噩梦。 @MathewMacLean，我没看到。为什么会是噩梦？这个怎么样：jsfiddle.net/9wxfY/4 当你去实现多个字符时会导致问题。 @MathewMacLean 这就是美妙的Lettering.JS 的用武之地。【参考方案9】：

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

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v)
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
);
body
    background-color: black;

.textToHalfStyle
    display:block;
    margin: 200px 0 0 0;
    text-align:center;

.halfStyle 
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;

.halfStyle:before 
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

【讨论】：

刚玩过@Arbel 解决方案 Arbel 的解决方案有什么不同？很难看出您是否只是复制粘贴了一些代码或对其进行了改进。【参考方案10】：

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

span 
  position: relative;
  color: rgba(50,50,200,0.5);


span:before 
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);

&lt;span data-char="X"&gt;X&lt;/span&gt;

【讨论】：

【参考方案11】：

有限的 CSS 和 jQuery 解决方案

我不确定这个解决方案有多优雅，但它会将所有内容减少一半：http://jsfiddle.net/9wxfY/11/

否则，我已经为您创建了一个不错的解决方案...您所需要做的就是为您的 HTML 设置这个：

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

至于CSS，是很有限的……你只需要应用到:nth-child(even)

$(function()
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length)
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  
);
.half-color span
  font-size: 2em;
  display: inline-block;
  overflow: hidden;

.half-color span:nth-child(even)
  color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

【讨论】：

【参考方案12】：

利用background-clip: text 支持的好解决方案：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;

【讨论】：

【参考方案13】： 
.halfStyle 
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);

.halfStyle:before 
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

http://experimental.samtremaine.co.uk/half-style/

你可以利用这段代码做各种有趣的事情——这只是我的同事和我昨晚想出的一个实现。

【讨论】：

【参考方案14】：

这样的短文本怎么样？

如果你用循环来做一些事情，它甚至可以处理更长的文本，用 JavaScript 重复字符。反正结果是这样的：

p.char 
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;


p.char:before 
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;

<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>

【讨论】：

【参考方案15】：

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

几个注意事项：

我这样做的主要原因是为了测试自己，看看我是否能够在为 OP 提供有意义的答案的同时完成半个角色的造型。

我知道这不是一个理想的或最具可扩展性的解决方案，这里的人们提出的解决方案对于“现实世界”的场景要好得多。

我创建的 CSS 代码是基于我想到的最初想法和我自己解决问题的方法。

我的解决方案仅适用于对称字符，如 X、A、O、M。**它不适用于非对称字符，如 B、C、F、K 或小写字母。

** 然而，这种方法创建了非常有趣的带有不对称字符的“形状”。尝试将 X 更改为 K 或小写字母，如 CSS 中的 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);

【讨论】：

【参考方案16】：

如果你愿意，你也可以使用 SVG：

var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) 
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;


title.innerHTML = '';
title.appendChild(svgTemplate);
<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

http://codepen.io/nicbell/pen/jGcbq

【讨论】：

【参考方案17】：

这可以通过 CSS :before 选择器和 content property value 来实现。

.halfed, .halfed1 
  float: left;


.halfed, .halfed1 
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative; /* To help hold the content value within */
  overflow: hidden;
  color: #000;





.halfed:before, .halfed1:before   
  width: 50%; /* How much we'd like to show */
  overflow: hidden; /* Hide what goes beyond our dimension */  
  content: 'X'; /* Halfed character */
  height: 100%;
  position: absolute;
  color: #28507D;





/* For Horizontal cut off */ 

.halfed1:before   
  width: 100%;
  height: 55%;
  

<div class="halfed"> X </div>

<div class="halfed1"> X </div>

>> See on jsFiddle

【讨论】：

【参考方案18】：

您可以使用以下代码。在此示例中，我使用了h1 标记并添加了一个属性data-title-text="Display Text"，该属性将在h1 标记文本元素上显示不同颜色的文本，从而产生如下示例所示的半色文本效果

body 
  text-align: center;
  margin: 0;


h1 
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;


h1::after 
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);

&lt;h1 data-title-text="Display Text"&gt;Display Text&lt;/h1&gt;

【讨论】：

【参考方案19】：

只为载入史册！

我为自己 5-6 年前的工作提出了一个解决方案，即 Gradext（纯 javascript 和纯 css，无依赖）。

技术解释是你可以像这样创建一个元素：

<span>A</span>

现在，如果您想在文本上制作渐变，您需要创建多个图层，每个图层都有特定的颜色，并且创建的光谱将说明渐变效果。

例如看看这是&lt;span&gt;里面的单词lorem，它会导致水平渐变效果（check the examples）：

 <span data-i="0" style="color: rgb(153, 51, 34);">L</span>
 <span data-i="1" style="color: rgb(154, 52, 35);">o</span>
 <span data-i="2" style="color: rgb(155, 53, 36);">r</span>
 <span data-i="3" style="color: rgb(156, 55, 38);">e</span>
 <span data-i="4" style="color: rgb(157, 56, 39);">m</span>

而且你也可以在很长一段时间和很长的段落中继续这种模式。

但是！

如果您想在文本上创建垂直渐变效果怎么办？

还有另一种可能会有所帮助的解决方案。我会详细描述的。

再次假设我们的第一个&lt;span&gt;。但内容不应该是单独的字母；内容应该是整个文本，现在我们将一次又一次地复制相同的 ‍‍&lt;span&gt;（跨度数将定义渐变的质量，跨度越大，结果越好，但性能不佳）。看看这个：

<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

再次，但是！

如果您想让这些渐变效果移动并从中创建动画怎么办？

好吧，还有另一种解决方案。您绝对应该检查animation: true 甚至.hoverable() 方法，这将导致基于光标位置开始渐变！ （听起来很酷 xD）

这就是我们在文本上创建渐变（线性或径向）的简单方法。如果您喜欢这个想法或想了解更多信息，请查看提供的链接。

也许这不是最佳选择，也许不是执行此操作的最佳性能方式，但它会开辟一些空间来创建令人兴奋和令人愉快的动画，从而激发其他人寻求更好的解决方案。

它将允许您在文本上使用渐变样式，甚至 IE8 都支持！

Here you can find a working live demo 和原始存储库是 here on GitHub as well, open source 并准备获得一些更新 (:D)

这是我第一次（是的，5 年后，你没听错）在 Internet 上的任何地方提及这个存储库，对此我很兴奋！

[更新 - 2019 年 8 月：] Github 删除了该存储库的 github-pages 演示，因为我来自伊朗！只有源代码可用here tho...

【讨论】：

【参考方案20】：

注意：这仅适用于一个字符，但如果您想要更多字符，请为每个信号字符添加一个类。并且您可以在线性渐变中使用deg 更改颜色方向。

.half-color 
    /* Create the gradient. */
    background-image: linear-gradient(90deg, rgba(54, 72, 95, 1) 50%, rgba(106, 221, 201, 1) 50%);
    /* Set the background size and repeat properties. */
    width: min-content;
    background-size: 100%;
    background-repeat: repeat;
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;

&lt;h1&gt;&lt;span class="half-color"&gt;X&lt;/span&gt;&lt;span class="half-color"&gt;Y&lt;/span&gt;&lt;span class="half-color"&gt;Z&lt;/span&gt;&lt;/h1&gt;

【讨论】：

已有多个答案依赖于背景剪辑和/或线性渐变。【参考方案21】：

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

div 
    position: relative;
    top: 2em;
    height: 2em;
    text-transform: full-width;


div:before,
div:after 
    content: attr(data-content);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;


div:after 
    color: red;
    /* mask for a single character. By repeating this mask, all the string becomes masked */
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);
    -webkit-mask-repeat: repeat-x;  /* repeat the mask towards the right */
    -webkit-mask-size: 1em;         /* relative width of a single character */ 
    
    /* non-vendor mask settings */
    mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);
    mask-repeat: repeat-x;
    mask-size: 1em;



/* demo purposes */
input[name="fontSize"]:first-of-type:checked ~ div 
    font-size: 1em;


input[name="fontSize"]:first-of-type + input:checked ~ div 
    font-size: 2em;


input[name="fontSize"]:first-of-type + input + input:checked ~ div 
    font-size: 3em;

Font-size:
  <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="A CSS only solution..."></div>
  <div data-content="Try it on Firefox!"></div>

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

掩码的宽度为mask-size: 1em，以匹配字符串中第一个字符的宽度。 通过使用mask-repeat: repeat-x，将相同的掩码应用于第二个、第三个字符等等。

我以为使用monospace字体可以解决使用等宽字母的问题，但我错了。 相反，我通过使用text-transform: full-width 解决了这个问题，不幸的是，我相信只有 Firefox 支持。

使用相对单位em 允许设计根据font-size 放大/缩小。

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

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

它的工作原理是为每个字符插入一个子 span。在每个 span 内，从 [0% - 50%] 和 [50% - 100%] 字母的宽度（即 span 元素的宽度）放置一个不重复的 CSS 掩码。

这样我们就不再有使用等宽字符的限制了。

const
    dataElement = document.getElementById("data"),
    content = dataElement.textContent,
    zoom = function (fontSize) 
        dataElement.style['font-size'] = fontSize + 'em';           
    ;

while (dataElement.firstChild) 
    dataElement.firstChild.remove()

for(var i = 0; i < content.length; ++i) 
    const
        spanElem = document.createElement('span'),
        ch = content[i];    
    spanElem.setAttribute('data-ch', ch);
    spanElem.appendChild(document.createTextNode(ch === ' ' ? '\u00A0' : ch));
    data.appendChild(spanElem);

#data 
    position: relative;
    top: 2em;
    height: 2em;
    font-size: 2em;


#data span 
    display: inline-block;
    position: relative;
    color: transparent;


#data span:before,
#data span:after 
    content: attr(data-ch);
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    color: initial;


#data span:after 
    color: red;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);
    mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);

Font-size:
<input type="range" min=1 max=4 step=0.05 value=2 oninput="zoom(this.value)" onchange="zoom(this.value)">

<div id="data">A Fallback Solution...For all browsers</div>

【讨论】：

以上是关于是否可以将 CSS 应用于字符的一半？的主要内容，如果未能解决你的问题，请参考以下文章

是否可以将 CSS 应用于字符的一半？

是否可以定义相对于未知 UIViews 的自动布局约束？

将自定义形状应用于剪辑属性 CSS

我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗？

根据子元素将CSS样式应用于元素[重复]

CSS：仅将指针事件应用于文本