微软雅黑与Microsoft YaH...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
2572 1 8 2023-11-16

最近在做一个桌面端的项目,由于只有Windows版的,为了最大还原设计稿,减少开发与上线效果的差距,字体采用了windows系统自带的微软雅黑。

在设计按钮时,虽然字体和按钮背景大小都是偶数,但是垂直方向上文字还是明显未居中(这个问题在多年前设计web端时就存在,后来改用苹方字体后就解决了)。

14px的“微软雅黑”字体,未设置行高的情况下,本来文字应该是上下居中的,但实际上文字上方有3px空白占位,下方有1px空白。采用这个字体即使进行了上下对齐,实际上也是没有对齐的。在一次无意中我发现,有一个Microsoft YaHei Ul的字体,出于好奇于是我试了下:


14px的Microsoft YaHei Ul字体,字形与微软雅黑一致,文字上下默认空白占位是相等的,上下间距都为2px;采用该字体则不存在无法对齐的问题。



我验证了一下,前端字体写成微软雅黑与Microsoft YaHei Ul存在同样的差异,如上图B中采用微软雅黑时,箭头和文字是无法对齐的。所以设计师要要求前端把字体写成Microsoft YaHei Ul,而不是微软雅黑或Microsoft YaHei。

Microsoft YaHei Ul字体是windows系统自带的,苹果系统里需要单独安装,我从Windows里面拷贝出来了一份,有需要字体包的可以自行安装:

链接:https://pan.baidu.com/s/1_ah7qMemuYun2OzpA7XJdQ

提取码:公众号内回复“雅黑”


文章来源:“小桔设计”公众号


Powered by Froala Editor

全部评论:1

  • 1-15 17:28

  • 1590283

    2023-11-30 23:12

    也在乎1到2个像素的差值啊。

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票