同一自定义字体， 同样fontsize，mac windows 同一浏览器（Chrome） ，渲染不一致issue

吐槽一下：感觉这个问题不算是什么疑难杂症啊， 为啥没查到多少解决办法

这是在 stackoverflow 上找到的一篇描述同样问题的帖子， 但时间是在9年前。。。。

问题描述

同一自定义字体， 同样 fontsize，在 mac windows 同一款浏览器（Chrome）中 ，渲染不一致，具体表现如下（蓝色阴影为审查元素时文本实际占用大小，我设置的 div 定宽， 高度没有设置）:

区别： mac 中的数字文本中， 数字部分没有垂直居中， 而是整个偏上了

说明：上面数字的 font-family 是苹果字体 DIN Condensed Bold， 为了将此样式通用到 windows 端的浏览器中， 我将它从 mac 的字体册导出并通过 @font-face 作为自定义字体引入；

然后, 就出现了上面这样渲染不一致的情况- -， 而这种差异对于整体布局影响很大（如垂直居中啊什么的）

分享两个搜索该问题的过程中看到的好文：

字号与行高

深度剖析 Baseline 设计原理

原因

简单来说就是， 字体文件包（我这里用的是.ttf的）在 mac 中和在 windows 中关于文字垂直位置的配置参数 是分别配置的， 所以很有可能出现渲染不一致的情况；

解决方法

1. 下载软件 fontforge（免费的）， 并用该软件打开你需要修改的字体文件（如后缀为.ttf的）
2. 点击 Element 后选择 FontInfo，再在左侧栏选择 OS/2，并切换到 Metric， 如图：

（说明： 蓝框为 windows 对应的配置， 红框为 mac 对应的配置；）

3.将红框数据更改为对应蓝框数据， 并注意红框中的 Descent 数字前有负号

4.选择file -> Generate Fonts ，选择字体格式，输出为你需要的字体文件

以上是我的解决方法， 至于这些参数具体是什么含义，建议看上面分享的文章， 解释的很详细了。

另外， 修改出来的字体是垂直居中的， 但是字体上下自带了很大的 gap， 这个可以通过设置字体的 line-height 为 font-size 大小 来解决

或者你也可以通过对 fontforge 这些配置参数的进一步理解找到更好的解决方案

欢迎遇到相同问题的同学分享讨论~~