css - 有什么方法可以修复 fonts.com @font-face 声明吗？

Question

许多流行的字体似乎都可以从 http://webfonts.fonts.com/ 专供网络使用

但是，它以一种非常奇怪的方式工作。他们不会给你直接的字体 URL，而是给你一个引用字体文件的 CSS 文件。我认为 CSS 中的字体 URL 可能是短暂的并且会随着时间的推移而变化，以防止未经授权的使用。所以你必须使用他们的 CSS，你不能直接合并字体文件 URL(据我所知)。

反过来CSS也不是我想的那样。而不是(简化):

@font-face { 
  font-family: "Foo";
  font-weight: bold;
  src: url("foo-bold-variant.ttf");
}

@font-face {
  font-family: "Foo";
  font-weight: normal;
  src: url("foo-normal-variant.ttf");
}

它是:

@font-face { 
  font-family: "Foo Bold";
  src: url("foo-bold-variant.ttf");
}

@font-face {
  font-family: "Foo Normal";
  src: url("foo-normal-variant.ttf");
}

因此，您不能这样做:

body {
  font-family: "Foo", sans-serif;
}

相反，您可以在任何地方使用 font-weight: bold ，您必须将其更改为 font-family: "Foo Bold" , 另外我想你必须添加 CSS 规则来改变像 <strong> 这样的家庭.我以粗体为例，但 font-style 也会出现同样的问题除了font-weight .

他们将此解释为 iOS 错误的解决方法(“这是一个功能!”):http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/

但该错误已在 iOS 4.2 中得到修复: http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/

使用此设置，除非我遗漏了什么，否则我无法使用任何尝试使用 font-weight 的第三方 CSS 或脚本。 ，因为 fonts.com 的方法打破了 font-weight和 font-style完全 CSS 属性。您必须为“mybold”或类似的东西创建一个自定义 CSS 类，而不是使用 font-weight，以将 font-family 设置为“Foo Bold”。也就是说，它们破坏了标准的 CSS。 (我错过了什么？)

也许他们会在某个时候解决这个问题。但与此同时，谁能想到一个明智的解决方法？无法根据“Foo Bold”等来定义家族“Foo”。@font-face有定义吗？编写一些疯狂的 JavaScript 以动态地从他们的 CSS 中提取 URL，然后动态定义我自己的@font-face？

(“对其他服务使用不同的字体”不算作答案；-)是的，我已经想到了，但我想知道是否有办法通过某种方式调整来“修复”webfonts.fonts.com他们的 CSS 与我自己的 CSS 规则或 JavaScript。)

Answer 1

遗憾的是，几乎两年后这仍然是一个问题，Fonts.com 没有立即改变他们声明字体的方式的计划 (asked them on Twitter)。

但是，如果您使用 CSS 编译器(例如 SASS)，您可以使用嵌套样式很容易地解决这个问题……唯一的缺点是它的代码比使用简单的字体粗细声明要多。

把这段代码扔在这里，以防有人像我一样偶然发现这个旧线程!

h1 {
    font-family: "PMNCaeciliaW01-75Bold", Georgia, Times, serif;

    b, strong {
        font-family: "PMNCaeciliaW01-85Heavy", Georgia, Times, serif;
    }
    i, em {
        font-family: "PMNCaeciliaW01-76BoldIt", Georgia, Times, serif;
    }
    b i, strong i,
    i b, i strong
    b em, strong em,
    em b, em strong {
        font-family: "PMNCaeciliaW01-86HeavyI", Georgia, Times, serif;
    }
}

它不会生成世界上最漂亮的 CSS，但它可以工作。