快好知 kuaihz

浏览器修复等宽字体

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:浏览器修复等宽字体  等宽  等宽词条  修复  修复词条  浏览器  浏览器词条  字体  字体词条  
开店

 80% 的 Windows 用户...

Cortana(小娜)是微软为 Windows 系统打造的私人助理系统,通过 Cortana,用户可直接用语音进行搜索、记事、控制等等。不过作为一款系统级功能,...(展开)