You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

浏览器渲染Gentium Plus字体时大写字母A尺寸异常高于Figma设计的问题求助

浏览器渲染Gentium Plus字体时大写字母A尺寸异常高于Figma设计的问题求助

Gentium Plus字体1.6rem下浏览器与Figma的显示对比
Gentium Plus字体1.8rem/1.9rem下的正常显示效果

大家好,

我最近碰到个挺闹心的问题:在用Google字体里的Gentium Plus时,浏览器渲染出来的大写字母A,比Figma设计稿里的要高出大概2像素,这个差异看着特别扎眼,我已经在第一张图里把这个问题标出来了。

目前我梳理了几个关键信息:

  • 浏览器和Figma用的是完全相同的字号和行高:1.6rem和23px
  • 我在HTML全局设置了html { font-size: 10px; }
  • 更奇怪的是,当我把字号改成1.8rem(对应18px)或者1.9rem(对应19px)时,浏览器里的字体显示就和Figma里的正常效果完全一致了,第二张图就是这个正常状态的样子

我真的特别中意这个字体,不想因为这个小问题就放弃它,所以如果有大佬能帮我分析下背后的原因,或者给点解决的思路,我真的会超级感谢!

备注:内容来源于stack exchange,提问作者dfr

火山引擎 最新活动