geeeger / blog

https://loofp.com
1 stars 0 forks source link

中文字体在HTML中,为何会被砍头砍脚 #9

Open geeeger opened 4 years ago

geeeger commented 4 years ago

砍头砍脚的情况:一般理解为字体实际比容器大。

前提条件,line-height 1 overflow hidden

凹凸实验室文章中的glyf小节的图1,https://aotu.io/notes/2020/02/28/webfont-processing/index.html

图2https://stackoverflow.com/questions/11526627/bounding-box-of-n-glyphs-given-individual-bboxes-and-advances

一个字体文件所携带的信息,以truetype为例:苹果官方文档

条件 line-height ,一般理解为基线到基线的距离,line-height = 1 ,表示文字基线到基线间没有间隙。

使用字体: 微软雅黑,

<div style="line-height:1;overflow:hidden;font-size:17.5px;">在</div>

观察到文字上部被截断,继续放大,观察到截断消失,推测为浏览器对奇数或者带小数字体大小进行了向上取整.

放大至200px,给下部增加padding,观察到文字下部超出盒子。

使用typr.js工具解析 微软雅黑regular,查看实验文字的基线位置,发现浏览器渲染位置比基线位置偏下,没有遮挡到下部大部分。

查看truetype OS/2 table文档,(仅针对windows)

ySubscriptYOffset

The Subscript Y Offset parameter specifies a font designer's recommended vertical offset from the character baseline to the character baseline for subscript characters associated with this font. Values are expressed as a positive offset below the character baseline. If a font does not include all of the required subscript for an application, this parameter specifies the recommended vertical distance below the character baseline for those subscript characters.

使用opentype.js 对文件进行解析,发现font.tables.os2.ySubscriptYOffset = 182,大概需要向下位移182.

应该正确的结论。