大多数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,除非将父级元素的字体系列设置为“等宽”,将字体系列更改为“等宽”以外的值不起作用。实际上,缩减是字体大小由子元素继承,而不管它们的字体。