如何仅使用CSS实现文本替换与格式化？将EXP、(n)hr转换为指定内容

由于CSS本身没有原生文本替换功能，我们可以通过两种hack方法实现需求，将EXP: 4hr转换为EXPIRATION: 4 HOURS：

方法一：伪元素覆盖+背景遮挡（无需额外资源） #

这种方法通过定位伪元素覆盖原文本的指定部分，适合无法引入自定义字体的场景：

#time-elapsed {
  position: relative;
  color: #000; /* 匹配原文本颜色 */
  line-height: 1.5em; /* 根据设备实际行高调整 */
}

/* 确保图标正常显示在最上层 */
#time-elapsed i {
  position: relative;
  z-index: 2;
  margin-right: 8px; /* 图标与文本的间距，按需调整 */
}

/* 替换"EXP:"为"EXPIRATION:" */
#time-elapsed::before {
  content: "EXPIRATION:";
  position: absolute;
  left: calc(1.2em + 8px); /* 1.2em为图标宽度，8px为图标间距，按需调整 */
  top: 0;
  background: #ffffff; /* 匹配容器背景色，完全覆盖原"EXP:" */
  color: inherit;
  padding-right: 4px; /* 防止原文本边缘漏出 */
}

/* 替换"hr"为"HOURS" */
#time-elapsed::after {
  content: "HOURS";
  position: absolute;
  left: calc(100% - 3em); /* 3em为"HOURS"的宽度，按需调整 */
  top: 0;
  background: #ffffff; /* 匹配容器背景色，完全覆盖原"hr" */
  color: inherit;
  padding-left: 2px; /* 增加数字与HOURS的间距 */
}

注意事项 #

• 需要根据实际图标宽度、字体大小调整left值中的数值
• 如果数字长度变化较大（如从1到99），需适当增大calc(100% - 3em)中的3em，避免覆盖数字

方法二：自定义字体替换（适配动态数字） #

如果设备支持引入自定义字体，这种方法更可靠，能完美适配任意长度的数字：

1. 生成自定义字体：

   • 复制售货机原字体文件，用FontForge或在线字体编辑工具修改字符映射：
     • 将字符E、X的字形设为空（宽度为0）
     • 将字符P的字形替换为EXPIRATION
     • 将字符h的字形设为空（宽度为0）
     • 将字符r的字形替换为HOURS
   • 导出为woff2格式的字体文件

2. CSS引入字体：

@font-face {
  font-family: 'VendingExpFont';
  src: url('vending-exp-font.woff2') format('woff2');
  /* 仅对需要替换的字符生效，不影响其他文本 */
  unicode-range: U+45,U+58,U+50,U+68,U+72;
}

#time-elapsed {
  font-family: 'VendingExpFont', inherit;
}

/* 确保图标字体不受自定义字体影响 */
#time-elapsed i {
  font-family: inherit;
}

注意事项 #

• 需确保自定义字体与原字体的字号、行高一致，避免排版错乱
• 部分老旧设备可能不支持woff2格式，可同时提供woff格式作为降级

内容的提问来源于stack exchange，提问作者アリ・ナディム