1

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

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

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

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

4

2 回答 2

1

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

  • EOT 格式仅受 IE 支持
  • 除了 IE8 之外的任何浏览器都支持 WOFF
  • IE 和 Firefox 不支持 SVG
  • 任何浏览器都很好地支持 TTF/OTF，但 IE

你涵盖任何浏览器吗？

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

我建议您在文档的开头部分包含Modernizer 。

在 Modernizer 的下载页面上选择@font-face和Add CSS classes ，或点击此下载链接。

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;
}
于 2012-09-15T13:22:05.930 回答
0

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

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

于 2012-09-15T13:11:49.350 回答