Question

我的问题是我使用的是本地托管的webfont（我们称之为Gothic），我在样式表中应用的字体大小会对声明的备份字体产生巨大影响。

示例，使用虚数来轻松：

Gothic的大小为48，px或em，占用的宽度约为300px。备份字体Arial，如果因任何原因而无法加载，则为48 px或em，加载宽度约为1200像素。

我从未见过这样的字体，这让我想知道奇怪是否是由于文件格式的构造，但我不确定。欢迎任何帮助。

Answer 1

首先，看一下浏览器的@font-face support并注意：

你覆盖任何浏览器吗？

然后，您需要为不支持@ font-face的浏览器提供备用。

我建议您在文档的主题部分添加Modernizer。

在Modernizer的下载页面上选择 @ font-face 和添加CSS类，或按照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;
}

Answer 2

理想情况下，您希望为字体堆栈选择一组比例相似的字体。如果在任何类似于你喜欢的字体的操作系统上没有你可以期待的字体，那么你现在就无法做到这一点。

字体大小不是你可以依赖的东西，因为用户可以并且会修改它。你的设计会发生什么变化？