如何始终调整本身小于标准的字体大小？答案

【问题标题】：How do I consistently size a font that is itself smaller than the standard?如何始终调整本身小于标准的字体大小？
【发布时间】：2012-09-08 09:09:07
【问题描述】：

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

例如，为了方便使用虚数：

Gothic 的大小为 48，px 或 em，大约占 300px 的宽度。备用字体 Arial，如果它以 48 px 或 em 加载而不是出于任何原因加载，则以大约 1200 像素的宽度加载。

我从来没有见过这样的字体，这让我怀疑这种奇怪是否是由于文件格式的构造造成的，但我不确定。欢迎任何帮助。

【问题讨论】：

您需要提供您正在使用的 CSS。
字体大小定义字形的高度，而不是宽度。不同的字体具有不同的平均宽度，因此渲染的文本在字体之间的总宽度可能会有很大差异。看看font-size-adjust property，显然浏览器支持很差。
@lanzz 我使用的是超浓缩字体 Dharma Gothic，所以这个理论似乎是合理的。有什么解决方法吗？
您应该指定更好的备份字体。 stackoverflow.com/questions/1161242/… 总体而言，最安全的解决方案是使用图像（或者如果您有雄心壮志，可以动态地将其用作后备），或者使用稍旧的解决方法，例如 Cufon。
感谢您的建议；我会在更好的选择上做一些功课。

【解决方案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;
}

【讨论】：

【解决方案2】：

理想情况下，您希望为您的字体堆栈选择一组具有相似比例的字体。如果在任何操作系统上都没有与您的首选字体相似的字体，那么您目前确实无法做到。

无论如何，字体大小都不是您可以依赖的，因为用户可以并且会修改它。当他们这样做时，你的设计会发生什么？

【讨论】：