如何通过自定义CSS将WordPress赛程表中特定单词'at'替换为'v'

DevOps 小满

2026-9-29

实现方案

CSS本身没有全版本通用的原生文本替换能力，但针对你给出的场景，有两种可直接落地的方案：

方案1：极简写法（覆盖95%以上主流用户）

利用CSS新特性text-replace直接替换文本，代码量最少，不需要额外资源：

/* 仅匹配比赛名称容器内前后带空格的独立单词at，避免误替换队名中包含的at字符 */
.mstw-lm-table .league-schedule-matchup {
  text-replace: " at " " v ";
}

兼容性说明：支持Chrome 115+、Edge 115+、Firefox 117+、Safari 16.4+，如果不需要兼容5年以上的旧版本浏览器，优先选这个方案。

方案2：全版本兼容方案（支持所有现代浏览器+IE11）

如果需要兼容旧浏览器，可以用自定义字体连字的方式实现，兼容性拉满：

用FontForge等本地字体工具生成极简自定义字体，仅包含空格、a、t、v四个字符，设置连字规则：前后带空格的at显示为前后带空格的v
将字体导出为woff2格式（体积仅几KB），上传到你的WordPress媒体库
添加如下CSS代码：

@font-face {
  font-family: 'ReplaceAtWithV';
  /* 替换成你上传的字体文件实际链接即可 */
  src: url('替换为你的字体文件本地路径') format('woff2');
  /* 仅加载需要的4个字符，不影响其他文字的字体显示 */
  unicode-range: U+0020, U+0061, U+0074, U+0076;
}
.mstw-lm-table .league-schedule-matchup {
  /* 后面补你网站原有的字体配置，保证其他文字显示和原来一致 */
  font-family: 'ReplaceAtWithV', system-ui, sans-serif;
  font-variant-ligatures: normal;
  font-feature-settings: "liga" 1;
}