浏览器修复等宽字体

大多数Web浏览器会在各种情况下自动缩小等宽文本的大小。他们这样做是因为和同一文本高度的其他字体相比，这些等宽字体的宽度更宽。为了解决这个问题，他们对等宽字体的处理从根本上去处理，这需要一个不寻常的CSS规则来解决问题。

解决方案

以下样式规则可恢复正常文本大小，而不会对文本产生任何其他影响。

pre,code,kbd,samp,tt{
 font-family:monospace,monospace;
 font-size:1em;
}

第一行是指在大多数浏览器中默认为等宽字体的五个HTML元素。第2行恢复Mozilla Firefox，Google Chrome和Safari中的正常文本大小; 这个不寻常的样式规则也应该用在你将font-family属性设置为'monospace'的任何地方。第3行恢复Internet Explorer和Opera中的正常文本大小。

浏览器减小文本大小的情况

所有主流浏览器都会减少默认为等宽字体的HTML元素的文本大小：pre（预格式化文本），代码（编程代码），kbd（键盘输入），samp（样本输出）和tt（typetype文本）。

此外，Mozilla Firefox，Google Chrome和Safari会减少font-family属性显式设置为“monospace”的元素中的字体大小。

浏览器不减小文本大小的情况

主要浏览器都没有减少具有以绝对单位（例如像素）指定的字体大小的元素内的文本大小。因为可以在任何父级元素上设置字体大小，所以可以通过在body元素上设置绝对字体大小来完全禁用字体缩放。但是，绝对单位会损害可访问性（因为某些较旧的Web浏览器无法调整以绝对单位大小调整的文本），因此不应使用。

Internet Explorer和Opera也不会缩小具有以相对单位（例如ems）指定的字体大小的元素内的文本。此功能可以在上面的解决方案中使用，其中字体大小设置为1em - 如果浏览器没有缩小文本，则该值将是原来的值。

在Google Chrome和Safari中，将字体系列设置为除通用系列“monospace”之外的任何其他内容都会禁用文本缩放。上面的解决方案使用了'monospace，monospace'这个值，尽管它在逻辑上等同于'monospace'，但它仍然有效。或者，您可以参考特定字体 - 例如，'Consolas，monospace'。

Mozilla Firefox的行为类似于谷歌Chrome和Safari，除非将父级元素的字体系列设置为“等宽”，将字体系列更改为“等宽”以外的值不起作用。实际上，缩减是字体大小由子元素继承，而不管它们的字体。