使用CSS为自定义字体添加渐变时文本右侧截断的问题

一、渐变文本的替代实现方案（解决字体截断问题） #

1. SVG 渐变文本（推荐，兼容性稳定） #

SVG对文本渐变的支持更原生，不会出现自定义字体边缘截断的问题，实现步骤如下：

<svg width="100%" height="60" viewBox="0 0 400 60">
  <defs>
    <!-- 定义线性渐变，可自行调整颜色和方向 -->
    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff7e5f" />
      <stop offset="100%" stop-color="#feb47b" />
    </linearGradient>
  </defs>
  <text x="0" y="40" font-family="TheSunset" font-size="48" fill="url(#textGradient)">你的渐变文本内容</text>
</svg>

之后在CSS中给SVG的text标签配置自定义字体即可，完全避开background-clip: text带来的字体渲染异常。

2. 伪元素叠加法 #

通过伪元素生成渐变背景，再利用混合模式与原文本结合，也能实现渐变效果：

h2 {
  position: relative;
  color: #000; /* 基础文本色，用于混合叠加 */
  font-family: 'TheSunset', sans-serif;
}

h2::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mix-blend-mode: multiply; /* 可根据需求调整混合模式 */
  z-index: 1;
}

HTML中需要给h2添加对应属性：<h2 data-text="你的文本内容">你的文本内容</h2>，这种方法能绕开原方案的字体截断问题。

二、代码规范与优化建议（针对新手） #

1. HTML 语义化优化 #

• 优先使用<header>、<section>、<footer>等语义标签替代大量<div>，提升代码可读性与页面SEO表现。
• 标题层级保持连贯，每个页面仅保留一个<h1>，不要跳过层级直接使用<h2>及以下标签。

2. CSS 组织与规范 #

• 按模块拆分CSS代码，比如将字体导入、全局样式、组件样式分开编写，便于后续维护。
• 自定义字体导入采用完整规范写法，优先使用体积更小、兼容性更好的woff2格式：

@font-face {
  font-family: 'TheSunset';
  src: url('the-sunset.woff2') format('woff2'),
       url('the-sunset.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

• 减少不必要的浏览器前缀，现代浏览器大多已支持background-clip: text，仅保留-webkit-前缀做兼容即可，也可借助Autoprefixer工具自动管理前缀。

3. 性能与调试技巧 #

• 压缩自定义字体文件，避免过大影响页面加载速度，可通过在线工具转换为woff2格式。
• 遇到渲染异常时，用浏览器开发者工具的Elements面板检查元素盒模型，排查是否由padding、margin或overflow属性导致文本截断。

内容的提问来源于stack exchange，提问作者Check D. Code