CSS @font-face引入自定义字体时大写V无法正常显示的解决方法

问题表现 #

• 站点配置自定义Carrotflower字体，强制所有h3标签调用该字体，除"Visitor Testimonials"文本中的大写V外，其余字符均能正常使用该字体显示
• 浏览器调试确认同字体下小写v可正常渲染，仅大写V无法命中自定义字体会自动 fallback 到系统默认字体
• 排除CSS样式冲突可能：单独加载对应字体文件做最小化测试时，大写V依旧无法正常渲染，问题和站点其他CSS规则无关

现有CSS配置 #

/* 为h3设置自定义字体 */
@font-face {
  font-family: carrotflower;
  src: url('/wp-content/uploads/fonts/Carrotflower.eot') format('embedded-opentype'),
       url('/wp-content/uploads/fonts/Carrotflower.woff') format('woff'),
       url('/wp-content/uploads/fonts/Carrotflower.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/Carrotflower.ttf') format('truetype');
}

h3{
    font-family: carrotflower !important;
}

问题根因 #

当前使用的Carrotflower字体文件本身未收录大写V（Unicode编码U+0056）对应的字形数据，浏览器在渲染时找不到该字符的字体映射，就会自动 fallback 到字体栈里的下一个可用字体，和CSS配置写法无关。

可行解决方案 #

方案1：修复字体文件（最优解） #

• 使用开源字体编辑工具（FontForge、Glyphr Studio均可）打开Carrotflower字体源文件
• 复制字体中已有的小写v字形，按照字体大写字符的统一尺寸、字重、基线位置调整后，映射到大写V的编码位
• 重新导出eot、woff、woff2、ttf全格式字体，替换服务器上原有字体文件，清空CDN和浏览器缓存后即可正常显示

方案2：CSS临时兼容（应急用，无需改字体） #

如果暂时无法修改字体文件，可以通过CSS模拟实现视觉一致的效果：

1. 给无法正常显示的大写V单独包裹内联标签
2. 将该字符转为小写v调用自定义字体，再通过样式调整大小匹配其他大写字母尺寸，示例代码如下：

/* 大写V临时适配样式 */
h3 .v-fix {
  font-family: carrotflower;
  text-transform: lowercase;
  /* 按实际渲染效果调整数值，匹配同文本其他大写字母的大小 */
  font-size: 1.4em;
  vertical-align: -0.05em;
}

该方案为视觉模拟方案，无法和字体原生大写字形100%一致，仅适合临时上线应急使用。

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