让我们先从一个实际问题出发
当我写了如下代码（p元素和其上级元素的font-size都未做设置，即为浏览器的默认字体大小，大部分浏览器默认为16px）
span {font-family: monospace}
<p>This is a 'p' with a <span>'span'</span> inside.</p>
打开浏览器之后我们确实可以在computed中看到p元素的大小为16px,但是此时span的大小是多少呢？
按照我们的第一想法，span没有设置那就是继承了父元素的默认字体大小，即16px，所以我认为span的字体大小是16px，但是在谷歌浏览器中，显示的却是13px。
很明显，问题就出在font-family: monospace（等宽字体的字体族名）上面。
然后我们可以在谷歌浏览器的字体设置里发现一个特例，也就是monospace的默认字体大小为13px。
看到这里，我们不妨去做个推测，就是说span的font-size会根据其font-family去计算，这时我们去试验一下
span {font-family: monospace; font-size: 16px;}
<p>This is a 'p' with a <span>'span'</span> inside.</p>
嗯。。。span的大小是16px了，再来一个
span {font-family: monospace; font-size: 1em;}
<p>This is a 'p' with a <span>'span'</span> inside.</p>
嗯。。span的大小又是13px。。。
那究竟什么时候font-size会根据font-family去计算呢？
这里就要聊一聊font-size的值了,除了可以给font-size设置固定值（px ,rem ,em ..），设置百分比，还可以给其设置绝对大小值：xx-small, x-small, small, medium, large, x-large, xx-large
画重点了，谷歌浏览器的字体默认值是 font-size: medium, 得到16px是因为大部分字体medium对应的值为16px。 也就是说，如果我们的字体得到的是绝对大小值，那么他会根据font-family去重新计算。
最后再归纳一下
第一段代码中,不写font-size,其实就是继承了浏览器的默认字体大小，即font-size:medium
第二段代码中，由于写了font-size:16px，所以得到的是font-size:16px(rem同理）
第三段代码中，写了font-size:1em,实际上会得到的font-size:1medium，如果是1.5em会替换成1.5medium（百分比同理）
也就是说最后的结果中带有绝对大小值的都会根据font-family重新计算
经过测试，大概只有写px和rem的时候结果不会得到绝对大小值，至于为什么，可能大概是因为谷歌浏览器的产品认为这样才能体现"不同font-family可以设置不同size"这个设置项的作用吧
解决方案
如果你一定要用monospace的话，把这个元素或者任意上级元素的font-size改成px或者rem就可以。
还有一种解决方法可以说和上面的分析毫无关系，就是当设置font-family为monospace时，在他前面添加一个确定的字体名，例如：font-family: "Courier New", monospace;
关于这种解决方法可以查看meyerweb.com/eric/though…
最后，这篇文档中说明的问题是针对谷歌浏览器的，在五大浏览器中，chrom，firefox，Safari中都存在这个问题，但是在ie和Opera中却不存在。
