有什么方法可以修复 fonts.com @font-face 声明吗？
许多流行的字体似乎只能在 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 规则来更改诸如 之类的内容。我使用粗体作为示例，但除了 font-weight 之外，font-style 也会出现同样的问题。
他们将此解释为 iOS bug 的解决方法（“这是一个功能！”）：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-family 设置为“Foo Bold”，而不是使用 font-weight。即它们违反了标准CSS。 （我错过了什么？）
也许他们有一天会解决这个问题。但与此同时，有人能想出一个明智的解决方法吗？没有办法用“Foo Bold”等来定义“Foo”家族。@font-face定义有吗？编写一些疯狂的 JavaScript 来动态地从 CSS 中提取 URL，然后动态定义我自己的 @font-face？
（“在其他服务中使用不同的字体”不算是答案；-）是的，我已经想到了这一点，但我想知道是否有一种方法可以通过某种方式调整其 CSS 来“修复”webfonts.fonts.com我自己的 CSS 规则或 JavaScript。）
Many popular fonts seem to be available for web use exclusively from http://webfonts.fonts.com/
However, it works in a very strange way. They don't give you the direct font URLs, instead they give you a CSS file that refers to the font files. I think the font URLs in the CSS are probably transient and change over time, to prevent unauthorized use. So you have to use their CSS, you can't directly incorporate the font file URLs (as far as I know).
The CSS in turn is not what I think it should be. Rather than (simplified):
@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");
}
It is:
@font-face {
font-family: "Foo Bold";
src: url("foo-bold-variant.ttf");
}
@font-face {
font-family: "Foo Normal";
src: url("foo-normal-variant.ttf");
}
As a result, you can't do this:
body {
font-family: "Foo", sans-serif;
}
Instead, anywhere you use font-weight: bold, you have to change it to font-family: "Foo Bold", plus I guess you have to add CSS rules to change the family on things like <strong>. I'm using bold as an example, but the same issue arises for font-style in addition to font-weight.
They explain this as a workaround for an iOS bug ("it's a feature!"): http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/
But that bug has been fixed in iOS 4.2:
http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/
With this setup, unless I'm missing something, I couldn't use any third-party CSS or scripts that try to use font-weight, because fonts.com's approach breaks the font-weight and font-style CSS properties entirely. Instead of using font-weight, you have to make up a custom CSS class for "mybold" or something like that to set the font-family to "Foo Bold." i.e. they break standard CSS. (What am I missing?)
Maybe they'll fix this sometime. But in the meantime, can anyone think of a sane workaround? There's no way to define family "Foo" in terms of their "Foo Bold" etc. @font-face definitions is there? Write some crazy JavaScript to extract the URLs from their CSS on the fly and then define my own @font-face dynamically?
("use a different font with another service" does not count as an answer ;-) yes I have thought of that, but I'm wondering if there's a way to "fix" webfonts.fonts.com by somehow tweaking their CSS with my own CSS rules or JavaScript.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
Fonts.com 现在有一个“家庭分组”选项来解决此问题。我没有彻底调查过，但看起来它是在 2013 年 9 月左右发布的。
Fonts.com now has a "Family Grouping" option to solve this problem. I didn't investigate to thoroughly but it looks like it was released around Sep. 2013.
虽然我意识到这需要更多的工作，但还有一种替代方法应该可以实现您想要的最终结果：Google 的 WebFont Loader API（使用我们提供字体的服务）。
本质上，Google 构建了一个 AJAX API，您可以将其与我们的服务一起使用。优点包括能够检测字体加载的状态 - API 根据字体是否无法加载（非活动）、当前正在加载（正在加载）或已成功加载（积极的）。然后，您可以使用一些巧妙的 CSS 规则来利用这些类。
更多信息可以在我们的 博文和 Google 文档。
While I realize it is a bit more work, there is an alternative method that should allow the end result you're aiming for: Google's WebFont Loader API (with our service delivering fonts).
Essentially, Google has built an AJAX API that you can use with our service. Advantages include the ability to detect the status of font loads–the API dynamically styles the HTML tag of the page with different classes based on whether a font fails to load (inactive), is currently being loaded (loading), or has successfully loaded (active). You can then use some clever CSS rules to take advantage of these classes.
More information can be found on our blog post and Google's documentation.
罗伯特给出了最佳答案作为对原始问题的评论。 Fonts.com 使用的是最受接受的 @font-face 版本（目前），由于跨浏览器支持参差不齐，该版本没有使用 font-weight 声明。
Robertc gave the best answer as a comment to the original question. Fonts.com is using the most accepted version of @font-face (at this time), which does not utilize the font-weight declaration due to spotty support cross-browser.
遗憾的是，近两年后这仍然是一个问题，Fonts.com 没有立即计划改变他们声明字体的方式 (在 Twitter 上询问他们）。
但是，如果您使用 CSS 编译器（例如 SASS），您可以使用嵌套样式轻松解决此问题。唯一的缺点是它比使用简单的字体粗细声明需要更多的代码。
将此代码扔在这里，以防有人像我一样偶然发现这个旧线程！
它不会生成世界上最漂亮的 CSS，但它可以工作。
Sadly this is still an issue almost two years later and Fonts.com has no immediate plans to change the way they declare fonts (asked them on Twitter).
However if you use a CSS compiler (eg. SASS) you can solve this issue pretty easily with nested styles... the only downside is it's more code than using a simple font-weight declaration.
Tossing this code here in case anyone stumbles across this old thread like I did!
It doesn't generate the prettiest CSS in the world, but it works.
更新2014/01/16： Fonts.com 现在支持标准字体嵌入。 以下内容仍然可以正常工作，但很大程度上被第一方支持所避免。
首先，请注意 Fonts.com 现在声称家庭分组“正在开发中” 。然而，与此同时，人们实际上可以使用 Fonts.com 提供的套件进行正常的
@font-face系列嵌入。[1]假设他们给你的字体声明是这样的，我在每种情况下都用
hash替换了字体文件的名称：[2]然后创建一个带有漂亮字体的字体系列name，您可以按如下方式调整这些声明：
就是这样；就是这么简单。我已经在我自己的网站之一上对此进行了测试，并且它按预期工作。显然，对于不支持它的旧浏览器，您将会遇到问题（Typekit 以其他方式解决的问题）。不过，如果您使用的是 fonts.com，这应该会为您解决这个问题。
脚注
hash是因为文件名看起来像是通过哈希生成器运行原始文件名生成的。由于这是一个自托管工具包，因此这些名称不会更改，因此将继续有效。感谢评论者 vieron 的 指出这需要澄清。Update 2014/01/16: Fonts.com now supports standard font face embeds. The following still works as it should, but is largely obviated by first-party support.
First, note that Fonts.com now asserts that family groupings are "in the works". In the meantime, however, one can actually do normal
@font-facefamily embeds using the kits Fonts.com supplies.[1]Assume that the font face declaration they give you is something like this, where I have substituted
hashfor the name of the font file in each case:[2]Then to create a font face family with a nice name, you can just tweak those declarations as follows:
That's it; it's that simple. I've already tested this on one of my own sites, and it works as expected. Obviously, for older browser that don't support it, you will have problems (problems which Typekit addresses in other ways). If you're using fonts.com, though, this should take care of it for you.
Footnotes
hashhere because the file names look like they're being generated by running the original file name through a hash generator. Since this is a self-hosted kit, those names aren't going to change and this will therefore continue to work. Thanks to commenter vieron for pointing out that this needed clarification.我为 Fonts.com 编写了一个小型 Javascript 加载器，允许每个字体系列使用多个权重。
它基于 rossi 的方法，但转换为可重复使用的脚本。查看此要点中的代码和用法。
基本上它从 fonts.com 加载 CSS，根据指定的设置进行修改并附加到文档的
中。在你的 JS 中：
在你的 CSS 中：
I wrote a small Javascript Loader for Fonts.com that allows multiple weights per font-family.
It's based on rossi's approach but converted into a re-usable script. Check out the code and usage in this gist.
Basically it loads the CSS from fonts.com, is modified according to the specified settings and is appended to the
<head>of your document.In your JS:
In your CSS:
一年过去了，但我仍然没有在 webfonts.fonts.com 中看到所需的功能，因此我遇到了与“Havoc P”相同的问题。看起来很令人沮丧。
幸运的是，我需要的字体也托管在“webtype.com”上，它允许使用标准的“样式链接”方法，并且如果需要的话还允许提供粗体/斜体不同的系列名称。所以我就随它去了。
A year passed, but I still don't see desired functionality in webfonts.fonts.com, so I encountered the same problems as "Havoc P". It looks quite frustrating.
Fortunately, fonts that I needed are also hosted on "webtype.com", that allows to use standard "style linking" approach and also allows to give bold/italic different family names if you want. So I just gone with it.
我这样做了：（没有费心去清理代码，这可能会更好/更通用，但无论如何我都会发布它，你会明白的）
它对 Internet Explorer 使用 document.stylesheets，因为我没有跨域 css 加载来使用它，而对于其他浏览器则使用 $.get ajax 加载 css。没有检查 ie 以下 8，但我认为它甚至可以在那里工作。
windows（vista）上的 chrome 会有一些闪烁，但我认为将其与 google webfont loader 结合起来就可以解决问题。
好的，所以我当前的项目不需要比这个快速破解更多的东西，但是如果有人编写了清理/优化的版本，我会很高兴听到它。
i did this: (didn't bother to clean up the code, this could be way better / more universal, but i'll post it anyway, you'll get the idea)
it uses document.stylesheets for internet explorer because i didn't get cross domain css load to work with it, and the $.get ajax load of the css for other browsers. didn't check in ie below 8, but i think it even works there.
there is some flicker in chrome on windows (vista) but i think a combination of this and google webfont loader would do the trick.
ok, so i don't need more than this quick hack for my current project, but if anyone codes a cleaned-up / optimized version i'd be happy to hear about it.