Question

CSS中，微软雅黑和Times New Roman 相同字号显示同一段中英文占用位置大小不一样吗？

本人新手小白，刚刚学习前端。
我在仿写京东页面时有一个地方写了一个定宽160px的盒子，里面放了两个a标签转换为行内元素的块，内容有汉字有英文。宽度都是70，给相同的边框2px，给两个amargin-right4px，按理说这两个块应该能并排放的，但是后面一个实际上被挤下去了，研究发现是宽度不够的缘故。但是按理说74+74+8＝156，两个块中间还有默认的4px间距（这个我也不知道为什么会是4，反正测出来就是默认有4空隙）。加上这个4那也正好160，为什么大放不下呢？
嗨呀，为了查出来到底什么bug苦恼了很久，因为检查元素测不出来有什么问题，页面初始化也写了，不存在多余的内外边距问题。后来我发现，我仿写的那个京东页面（是别人写的不是京东原版），检查元素，在字体那一块，纯汉子的那个a就是微软雅黑字体，另一个有汉字有英文的a字体则优先是微软雅黑然后是Times New Roman，然后我怀疑是这个缘故，我的页面初始化里面字体没有声明，全是默认微软雅黑。我加了一下声明，优先新罗马然后微软雅黑。结果英文会自动显示新罗马了，然后两个块给4px右边距也能并排显示了。说明同样的字号。新罗马和微软雅黑处理英文时候，微软雅黑占的空间大？
但是既然微软也是标准字号（这里我是12px），为什么内容和盒子就有了大小冲突？实际开发中是不是在初始化中把需要用的字体先声明一遍？
我后来做实验单独写几个新页面，发现即便没有声明字体，火狐还是可以自动给汉字微软雅黑给英文新罗马的。妈蛋为什么我一开始那个页面就不行？我明明没声明字体啊，为什么默认只有微软雅黑没有新罗马？这个页面有毒？





Answer 1

英文字体分两种，一种是等宽字体，另一种则是比例字体。Times New Roman是比例字体，所谓比例字体就是每个字母的宽度是不相等的，其中大写M最宽，小写i最窄。中文字体则全部都是等宽字体（包括其中包含的半角英文、字母和符号），其宽度等于同字号英文等宽字体的2倍。
因此，当中文与英文等宽字体混排时，其总宽度是可以根据字号和字数很方便地计算出来的，即中文的宽度与字号相等，英文则是字号的一半。
但是，当中文与英文比例字体混排时，其总宽度就变得不可控了，两者只能在字体的高度上保持相等，在宽度上则是无法预知的（当然，CSS内部会计算总宽度来决定要不要换行）。
补充说一下：英文（以及所有字母文字）自诞生起就是比例字体，这样的话写出来或者印刷出来才美观（否则的话M两边几乎没空隙，i两边却很空）。但是，自从打字机出现（以及后来的电脑），比例字体的局限性就显出来了（主要是会增加机器自动排版的难度），这才诞生了等宽字体。当然随着电脑技术的发展，比例字体的自动排版早已不在话下，但要通过人工来计算其宽度仍然是不现实的事，所以两种字体才能共存至今。