如何实现单个字母内双色的标题？以Modern Art Gallery为例

方案一：利用background-clip: text + 线性渐变（推荐，单元素实现） #

这是最简洁的实现方式，无需拆分文本或叠加多个元素，仅靠单个标题元素就能完成：

1. 核心原理：给标题设置线性渐变背景，让渐变的分界点精准落在字母'n'内部，再通过background-clip: text让文本区域显示背景颜色，同时将文字本身设为透明。
2. 代码示例：

h1 {
  /* 固定字体确保字母位置稳定，方便调整渐变分界点 */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 48px;
  font-weight: bold;
  /* 渐变分界点需根据实际n的位置调整，52%为示例值 */
  background: linear-gradient(to right, #000 52%, #fff 52%);
  /* 让文本裁剪背景，仅显示背景在文本区域的部分 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 隐藏原文字颜色，只显示背景渐变效果 */
  color: transparent;
}

3. 调整方法：
   • 打开浏览器开发者工具，选中标题元素查看文本总宽度
   • 测量字母'n'的中间位置距离标题左边缘的长度
   • 计算该长度占总宽度的百分比，替换代码中的52%即可。

方案二：伪元素叠加 + clip-path 裁剪（适配复杂分界形状） #

如果需要更精确的不规则分界（比如n内部的斜切效果），可以用伪元素复制文本后裁剪显示区域：

1. 核心原理：主标题显示一种颜色，伪元素复制相同文本显示另一种颜色，通过clip-path裁剪伪元素，只保留需要覆盖的部分并叠加在主标题上。
2. 代码示例：

h1 {
  position: relative;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 48px;
  font-weight: bold;
  color: #000; /* 主标题颜色（例：黑色） */
}

h1::after {
  content: attr(data-text); /* 通过属性复制文本，避免重复编写 */
  position: absolute;
  top: 0;
  left: 0;
  color: #fff; /* 伪元素颜色（例：白色） */
  /* clip-path裁剪：仅显示n右侧及之后的内容，示例值需根据实际调整 */
  clip-path: inset(0 0 0 52%);
}

<h1 data-text="Modern Art Gallery">Modern Art Gallery</h1>

3. 调整方法：
   • 用开发者工具测量n的中间位置占总宽度的百分比，替换clip-path中的52%
   • 若需斜向分界，可将inset替换为polygon，例如polygon(0 0, 100% 0, 100% 100%, 52% 100%)。

注意事项 #

• 务必固定字体：不同字体的字母宽度、间距差异较大，固定字体才能保证分界位置稳定。
• 兼容性测试：background-clip: text目前主流浏览器均支持，但旧版Safari需添加-webkit-前缀。

内容的提问来源于stack exchange，提问作者willy chrosnik