计算机及HTML中字符尺寸技术疑问：font-size含义与长度机制

1. font-size设为1px时，字符的宽高都是1px吗？ #

不是。font-size定义的是字体em框（em square）的高度，这是字体设计时的基准参考尺寸，并非字符实际的显示宽高：

• 实际字符的高度（比如从基线到顶线的距离）通常会小于或等于这个基准高度，具体取决于字体的设计；
• 字符的宽度完全由字形本身决定，不同字符（比如窄的i和宽的w）宽度差异极大，不会统一等于font-size的数值。哪怕设为1px，实际显示的字符宽度也可能超过1px，高度也可能因字体设计略有浮动。

2. HTML中单个字符的长度如何定义？ #

HTML本身不直接定义字符尺寸，字符的显示大小由以下两部分决定：

• CSS字体属性：font-size设定字体的基准em框大小，font-family决定使用的字体文件，额外的属性如font-stretch可以拉伸或压缩字符；
• 字体文件本身：每个字符的字形都有自己的字形边界（glyph bounding box），定义了该字符实际占用的宽高空间，同时还有前进宽度（advance width），决定字符排版时的水平占位距离。

3. 字符尺寸在HTML与屏幕中的工作机制 #

字符从代码到屏幕显示的流程大致如下：

• 浏览器解析HTML结构与CSS样式，确定目标字体和font-size；
• 加载对应字体文件，读取字符的字形数据、前进宽度等信息；
• 将字体的em框映射到屏幕像素：1px的font-size在普通屏幕对应1个物理像素，高DPI屏幕（如Retina）会按设备像素比缩放，确保显示清晰；
• 栅格化渲染：将矢量字体的字形数据转换成屏幕上的像素点，若font-size过小（如1px），浏览器会做抗锯齿处理或微调，避免字符无法辨认；
• 布局排版：根据字符的前进宽度计算文本行的总宽度，完成页面布局。

内容的提问来源于stack exchange，提问作者harish