字体基础知识

1.1纵向结构

字体结构

• baseline（基线）：理解为坐标原点
• ascent（上）：基线之上占有空间
  • x-height
  • cap height
• descent（下）:长字母比如j的尾巴占有的空间
• line gap （行间距）:descent之下再到下一行的头的距离
• line-height（行高）：ascent+descent+line-gap

1.2 字体大小

  在一个字体中，每个字符都放置在其空间容器内。在传统的金属字模中，这个容器就是每个字符的实际金属块。每个字符的高度是统一的，这样每个字模可以整齐地放进行和块中（如下）
[图片上传失败...(image-3a88d9-1516808329845)]

1.2.2 字体单位与大小

  先明确，我们设计字体时，只需要定义字体各部分比例是158:121:75，没有单位，只是比例。然后字体使用者为他们添加实际的物理大小就可以了。
  绝对单位包括：px(相对于浏览器分辨率)，em,point，mm等，就是我们能直接用尺子能画出来长度。
  我们将em（你可以理解为0.1mm数据不对哈）设定为我们的相对单位，在我们设计字体时，不考虑其具体的物理尺寸，并将1em根据你的喜欢切割成100或者1000份，设计字体时，我们可以设定比例是500:300:200（em/1000），然后当你打字时，你输入大小是25em或者16px，就得到各部分大小250.5:250.3:25*0.2;

1.2.1 字模

• 基础字体单位
  • point-size（点值）：就理解成字体专用的单位。就像焦耳赫兹一样。
    [图片上传失败...(image-6f57eb-1516808329845)]
  • em-square
    • 也被称作“EM size”或者“UPM”。
    • em是字模的高度，起源于M的宽度，按比例被做成了方形，形成了square
    • em-size 也就是根据字模的大小，计算出的point值（单位转化，可以这么理解）。

1.2.2 当我们设置font-size发生了什么？

• 相对单位：em(切分1000份)
• 样本字体：Catamaran
• 分析软件：fantforge
• 呈现介质：macos与Windows
    字体初始比例：ascender:descender = 1100:540(都超出了em-square，这是允许的)；这意味着字体有1640个相对单位。设置font-size:100px,文字高度是100 * 1.64 = 164px，这决定了content-area是164px，而不是100px;
• macos：浏览器使用了HHead-Ascent与HHead-Descent
• windows：浏览器使用了Win Ascent和Win Descent
  [图片上传失败...(image-2181f7-1516808329845)]

本文参考如下资料：

1. 方方老师：深入理解 CSS：字体度量、line-height 和 vertical-align
   
2. 维基百科对于em point-size的理解
3. http://designwithfontforge.com/zh-CN/The_EM_Square.html