咨询：LFT Etica字体数字高度不一致的非换字体修复方法

问题描述 #

使用LFT Etica字体时，数字显示高度不一致：0、2、3、6、8、9偏高，1、4、5、7偏矮。尝试过font-variant-numeric和font-variant属性无效，当前CSS代码如下：

body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5715;
    font-family: LFT Etica, Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-feature-settings: normal;
    font-variant: normal;
}

解决方案 #

方案1：启用字体内置的表格数字特性

优先尝试启用字体的**tabular figures（表格数字）**特性，这类特性设计用于让所有数字基线对齐且宽度一致，是最优解。修改CSS：

body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5715;
    font-family: LFT Etica, Lucida Sans Unicode, Lucida Grande, sans-serif;
    /* 启用表格数字 */
    font-feature-settings: "tnum";
    /* 兼容不同浏览器的写法 */
    font-variant-numeric: tabular-nums;
}

方案2：手动校准矮数字（字体无内置特性时）

如果方案1无效，说明该版本LFT Etica不支持tabular figures，可通过CSS定位手动调整偏矮数字：

1. 给偏矮数字添加类名（如<span class="short-digit">1</span>），然后调整位置：

.short-digit {
    position: relative;
    top: -1px; /* 根据实际显示偏移微调数值 */
}

2. 动态数字自动处理（适合列表、统计数据等场景）：
   如果数字是动态生成的，可结合CSS计数器和伪元素统一校准：

/* 假设数字容器类名为digit-container */
.digit-container {
    position: relative;
    counter-reset: digit-counter;
    visibility: hidden; /* 隐藏原始数字 */
}
.digit-container::after {
    counter-increment: digit-counter attr(data-digit number);
    content: counter(digit-counter);
    position: absolute;
    top: -1px; /* 微调偏移 */
    left: 0;
    visibility: visible;
    color: inherit;
    font-family: inherit;
}

使用时给容器加data-digit属性：<div class="digit-container" data-digit="1"></div>

方案3：微调行高或垂直对齐

作为补充，可尝试调整line-height或vertical-align，但效果可能有限：

body {
    /* 其他属性保留 */
    line-height: 1.6; /* 适当增大行高，让数字垂直空间更充足 */
}

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