SVG转自定义图标字体：字体网格设置及尺寸不符问题排查

嘿，我看你遇到了自定义图标字体的烦人问题——24px和72px字号下，图标高度总是多1px，32px时又刚好正常，对吧？这大概率和字体的度量设置以及SVG字形的边界有关，我来帮你一步步解决：

问题根源分析 #

你看到的24×25、72×73这种尺寸偏移，核心原因是字体的基线（baseline）和字形的边界计算不匹配，或者SVG转字体时没有正确配置字体的升部（ascent）、降部（descent）参数。

从你提供的<glyph>代码来看，路径里有向下延伸的坐标（比如v-452.267），这意味着字形有一部分落在了基线以下，转字体时这部分被计算成了1px的降部。当font-size是24px时，字体的总高度就变成了ascent（24px） + descent（1px）=25px，32px时可能因为浏览器渲染的取整机制刚好掩盖了问题，但本质的度量偏差还是存在的。

修复尺寸偏移的具体步骤 #

1. 调整SVG字形的位置，消除基线以下的延伸 #

你需要把整个箭头字形向上移动，让它的底部刚好对齐基线，没有向下的部分。修改<glyph>的路径，把所有y轴相关的坐标向上偏移，比如原来的v-452.267可以调整为更靠上的数值，确保整个路径的最低点刚好在基线位置（也就是对应字体em框的底部）。

2. 修正CSS样式，强制对齐规则 #

在现有CSS基础上，添加line-height:1和vertical-align:top，消除行高和基线对齐带来的额外空间：

.c-class {
  font-size: 24px;
  line-height: 1; /* 移除行高带来的多余高度 */
}
.c-class:before {
  font-size: inherit;
  vertical-align: top; /* 强制图标顶部对齐，避免基线偏移 */
}

3. 重新生成字体时配置正确的度量参数 #

如果你用IcoMoon、Fontello这类工具生成字体，导出时一定要设置：

• 升部（Ascent）：等于字体的em大小（比如1024）
• 降部（Descent）：设为0
  这样字体的总高度就会严格等于font-size，不会出现额外的1px高度。

如何为SVG自定义字体设置字体网格 #

字体网格其实就是字体的em框，是控制字形缩放和对齐的核心，设置步骤如下：

• 选择合适的em大小：优先选1024或2048，数值越大，字形坐标的精度越高，缩放时失真更少。
• 对齐SVG字形到网格：确保所有SVG字形的路径都完全落在em框内，比如em大小为1024时，路径的x、y坐标要在0~1024之间，同时把字形的底部对齐到基线（em框的底部）。
• 在生成工具中配置度量：
  • 升部：设为em大小，让字形的顶部刚好触达em框的顶部
  • 降部：设为0，避免字形向下延伸
  • 行高：设为和em大小一致，确保行内元素的高度符合预期

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