恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
微软雅黑与Microsoft YaHei UI有什么区别
14.8°
2023-11-16 原创文章 经验/观点 举报 4040 5 9 1

最近在做一个桌面端的项目,由于只有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

更新:2023-11-16

收藏

5人已收藏

  • 13

    作品

  • 33

    粉丝

  • 5

    关注

  • 搞定B端:宽窄屏适配设计思考
  • 批量操作效率悖论:B端表格设计背后的思考(上)
  • 设计师提升开发效率之密码设计
  • icon切图,png/svg/iconfont哪种格式更好?
相关标签

    猜你喜欢

      2023-11-16 原创文章 经验/观点 举报 4040 5 9 1

      微软雅黑与Microsoft YaHei UI有什么区别

      14.8°

      你确定要举报微软雅黑与Microsoft YaHei UI有什么区别

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2023年11月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      5
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录