我的问题是我使用的是本地托管的网络字体(我们称之为 Gothic)，我在样式表中应用的字体大小对声明的备份字体有显着影响。
示例，为了方便使用虚数:
Gothic 的大小为 48，px 或 em，约占 300px 的宽度。备用字体 Arial，如果它出于某种原因加载为 48 px 或 em，则加载宽度约为 1200 像素。
我从来没有见过这样的字体，这让我想知道这种奇怪是否是由于文件格式的构造造成的，但我不确定。欢迎任何帮助。
最佳答案
首先看一下浏览器的@font-face support并注意:
- 只有 IE 支持 EOT 格式
- 除 IE8 外，任何浏览器都支持 WOFF
- IE 和 Firefox 不支持 SVG
- 除 IE 之外的任何浏览器都很好地支持 TTF/OTF
你们涵盖任何浏览器吗？
然后你需要为根本不支持@font-face 的浏览器提供回退。
我建议你包括 Modernizer在文档的头部部分。
在Modernizer的下载页面选择@font-face和Add CSS classes，或者按照download link .
Modernizer 将类添加到您页面的 <html>元素，因此您可以使用此类来覆盖不支持特定功能的浏览器的设置。
此规则将应用于整个文档:
.no-fontface {
font-size:16px; /* the font size value for Arial only */
}
它必须放在任何其他的下方 font-size规则。
或者，您可以声明 font-size:16px !important;并将规则放在样式表的任何位置。它不会被覆盖(当然，使用 important! 的其他规则除外)。
如果你想定位一个特定的元素，你必须输入 .no-fontface在选择器的开头。例如:
.no-fontface #header h1 {
font-size:18px;
}
关于css - 如何始终调整本身小于标准的字体大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12437439/