2

我使这个例子尽可能简单：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" 
        rel="stylesheet" type="text/css">
  <style type="text/css">
    h1 {
      font-family: "Open Sans";
      font-weight: 800;
    }
  </style>
</head>

<body>
  <h1>Testing h1</h1>
</body>

</html>

现在在 IE6-8 中，H1 标签将显示为 300 或 800 以外的其他内容......它看起来像 600。如果我删除 800，它会正确显示为 300。如果我删除 300 并保留 800 ，它正确显示为 800。其他任何人都可以复制这个并解释 IE 是如何显示我什至没有拉入的字体粗细吗？

4

2 回答 2

4

很抱歉回答我自己的问题，但我有一个解决方案。

我最终只在链接标签中留下了 300 的重量。对于 800，我从 URL 中获取了引用的内容（@font-face 声明），将其粘贴到我的 CSS 文件中，并将字体系列重命名为 Open Sans（Open Sans Bold）以外的其他内容……更改了我的 h1 font-family 为不同的名称和 BAM，在所有主要浏览器中正确格式化字体权重。

此外，您只需下载 google web-font embed 提供的 .woff 字体，然后在 FontSquirrel 上创建一个工具包。

于 2012-02-04T18:21:05.027 回答
2

根据这篇关于 Adob​​e TypeKit IE6-8 的文章在加载构成特定 webfont 的所有不同字体变体时遇到问题：http: //help.typekit.com/customer/portal/articles/6855

值得注意的是，TypeKit 和 Google Fonts 通过 Font Loader 相关联（请参阅此处：https ://developers.google.com/fonts/docs/webfont_loader 。）然而，虽然 Adob​​e TypeKit 已经为 IE 字体变体问题提供了解决方案，但它似乎无法通过 Google 字体使用。

TypeKit 方法是为每种字体粗细和样式显式声明一个字体系列。

例如

.light {
  font-family: "proxima-nova-n3", "proxima-nova", sans-serif;
  font-style: normal;
  font-weight: 300;
}
.thin-italic {
  font-family: "proxima-nova-i1", "proxima-nova", sans-serif;
  font-style: italic;
  font-weight: 100;
}

这似乎遵循了一种转换，即在字体名称后加上一个字母作为字体样式（n 表示正常，i 表示斜体）和一个数字表示权重（1 表示 100，6 表示 600）。我已经尝试过使用 Google 字体，但遗憾的是它不起作用。

于 2014-02-19T13:10:57.807 回答