加载自定义图标字体时如何调整图标定位与尺寸异常问题

我刚创建了一套自定义图标字体，但加载后图标定位不准确，且尺寸小于预期：

我尝试为通用.icon类添加position:relative属性，同时调整line-height和font-size：

position: relative;
bottom: -4px;

但该设置仅能让按钮内的图标定位正常，由于不同元素有各自的padding、line-height等属性，其他元素中的图标仍存在问题。

请问是否有通用方案可让所有图标定位正常？是否需要调整字体而非CSS？

当前CSS代码如下：

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 1.3rem;
  position: relative;
  bottom: -4px;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

通用解决方案及字体调整建议 #

一、CSS层面的通用修复方案 #

1. 用inline-block替代相对定位
   硬编码的相对定位偏移适配性极差，改用display: inline-block配合vertical-align属性，能让图标在不同行高、padding的元素中自动对齐：

   [class^="icon-"], [class*=" icon-"] {
     display: inline-block;
     vertical-align: middle;
     /* 保留原有核心属性，移除position和bottom */
     font-family: 'icomoon' !important;
     speak: never;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     font-size: 1.3rem;
   
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   

   若仍有细微偏移，可微调vertical-align的值（比如text-bottom或baseline），或添加极小的margin-top/margin-bottom适配。

2. 统一图标尺寸的自适应基准
   把固定font-size: 1.3rem改为基于父元素的相对单位，再通过缩放调整视觉尺寸，让图标随父元素字体大小自适应：

   font-size: 1em;
   transform: scale(1.3);
   transform-origin: center;
   

二、字体文件层面的根源调整 #

如果CSS修复后仍有顽固的定位/尺寸问题，说明图标字体本身的基线、字形占比设置有问题，需要用FontForge、Glyphs等工具修改字体文件：

• 对齐标准基线：将图标字形对齐到字体的标准基线位置，同时确保字形的上下高度符合常规字体的em框比例（通常em框高度设为1000或2048单位）。
• 修正字形边距：检查每个图标字形的左右/上下边距，避免图标与文字、图标之间出现多余空隙；同时调整字形在em框内的占比，解决视觉上的尺寸偏小问题。
• 规范导出设置：导出字体时选择统一的em大小（如1000），并勾选优化字形选项，减少浏览器渲染偏差。

三、额外优化技巧 #

• 不要强制设置line-height: 1，改为继承父元素的line-height，配合vertical-align提升适配性。
• 用:before伪元素承载图标字体（主流图标框架的通用做法），避免图标元素本身的布局干扰：

  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icomoon' !important;
    /* 其他属性同上 */
  }
  

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