CSS实现接近极限上下间隙的字体

CSS：line-height和vertical-align对DOM元素上下间隙的影响：
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
（上面链接是张鑫旭大佬的文章）

问题：实现接近极限上下间隙的字体

最终效果

----  <- 这个是上边框
                            ----  <- 这个是上边框
字体                    =>   字体 
                            ----  <- 这个是下边框
----  <- 这个是下边框

正确案例

其实font-size和line-height设置成相同的值就可以近乎实现接近极限上下间隙的字体，搞了一下午去计算，最后无意间试出来了。。。
scss函数实现如下：

/* 设置接近极限上下间隙字体 */
$mainFontSize: 16;
@mixin extremeFontSize($size) {
  font-size: ($size * 2 + 10 ) / $mainFontSize + rem;
  line-height: ($size * 2 + 10 ) / $mainFontSize + rem;
}

CSS实现如下：

/* 设置接近极限上下间隙字体 */
  font-size: 16px;  // 值可修改
  line-height: 16px;  // 值可修改

失败案例

/* 字体上下极致行高间隙
  param:
    - $size: 当前字体的rem值（如：1rem）
    - $unit: 单位(rem)
    根字体16px下的极限行高值为0.805
  注意：极限行高值 = (12.88 / 全局字体大小rem) * 字体大小(rem) (实验是在全局根字体大小默认为14px下进行)
       字体默认行高比例和字体比例略成正比，?疑是发散（只对chorme浏览器进行探究）-->
       | (字体)  （行高）
       | 1rem = 1.571...rem
       | 1.5rem = 2.357...rem
       | 2rem = 3.214rem...rem
       |.........
       14px(font-size) -> 22px(line-height) -> 12.88px(extreme-line-height)
*/
// @mixin defaultFontSize($size, $unit) {
//   font-size: ($size * 1 + 12) / $mainFontSize + $unit;
//   line-height: (12.88 / $mainFontSize) * (($size * 2 + 10) / $mainFontSize) + $unit;
// }