有没有办法修复fonts.com @ font-face声明？

时间：2011-04-28 20:57:43

标签： css html5 font-face webfonts

许多流行的字体似乎只能从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/

但是这个bug已经在iOS 4.2中得到修复： http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/

使用此设置，除非我遗漏了某些内容，否则我无法使用任何试图使用font-weight的第三方CSS或脚本，因为fonts.com的方法会破坏font-weight和{ {1}} CSS属性完全。您必须为“mybold”或类似的东西组成一个自定义CSS类，而不是使用font-weight，以将font-family设置为“Foo Bold”。即他们打破标准CSS。 （我错过了什么？）

也许他们会在某个时候解决这个问题。但与此同时，任何人都可以想到一个理智的解决方法吗？没有办法根据他们的“Foo Bold”来定义家庭“Foo”等等。font-style定义是什么？写一些疯狂的JavaScript来动态地从CSS中提取URL，然后动态定义我自己的@ font-face？

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

8 个答案:

答案 0 :(得分：3)

可悲的是，差不多两年后这仍然是一个问题，而且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，但它有效。

答案 1 :(得分：3)

更新2014/01/16： Fonts.com now supports standard font face embeds.以下内容仍然有效，但很大程度上是由第一方支持所取代。

首先，请注意Fonts.com现在断言家庭分组是"in the works"。然而，与此同时，人们可以使用Fonts.com供应的工具包实际进行正常的@font-face家庭嵌入。[1]

假设他们给你的字体表面声明是这样的，我在每种情况下用hash代替字体文件的名称：[2] 

@font-face{
    font-family:"Minion W01 It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion W01 Regular";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

然后要创建一个名字很好的字体家族，你可以按如下方式调整这些声明：

@font-face{
    font-family:"Minion";
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: normal;
    font-style: normal;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

就是这样;就这么简单。我已经在我自己的一个网站上测试了它，它按预期工作。显然，对于不支持它的旧浏览器，您将遇到问题（Typekit以其他​​方式解决的问题）。但是，如果您使用的是fonts.com，则应该为您处理。

脚注

  1. 注意：此特定方法仅保证适用于自托管选项，不适用于Fonts.com托管的版本。我怀疑它可能适用于它们所托管的版本，但我没有测试它，并且不打算在不久的将来;如果有人想要并在评论中告诉我，我会很高兴地更新答案以反映这一点。
  2. 我在这里使用hash因为文件名看起来像是通过哈希生成器运行原始文件名而生成的。由于这是一个自托管套件，这些名称不会改变，因此这将继续有效。感谢vieron的评论者pointing out，这需要澄清。

答案 2 :(得分：2)

我为Fonts.com编写了一个小型Javascript Loader，它允许每个字体系列有多个权重。 它基于rossi的方法，但转换为可重复使用的脚本。查看this gist中的代码和用法。

基本上它从fonts.com加载CSS，根据指定的设置进行修改，并附加到文档的<head>。

在你的JS中：

FontsComLoader.load('HelveticaNeueFontsCom', 'https://fast.fonts.net/cssapi/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.css', {
    'W02-55Roma': '400',
    'W02-75Bold': '700'
});

在你的CSS中：

.helvetica-regular,
.helvetica-bold {
    font-family: 'HelveticaNeueFontsCom', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.helvetica-regular {
    font-weight: 400;
}

.helvetica-bold {
    font-weight: 700;
}

答案 3 :(得分：1)

一年过去了，但我仍然没有在webfonts.fonts.com中看到所需的功能，所以我遇到了与“Havoc P”相同的问题。看起来很令人沮丧。 幸运的是，我需要的字体也托管在“webtype.com”上，允许使用标准的“样式链接”方法，并且如果需要，还允许使用粗体/斜体不同的姓氏。所以我就跟它一起去了。

答案 4 :(得分：1)

我这样做了:(没有费心去清理代码，这可能会更好/更普遍，但无论如何我会发布它，你会得到这个想法） 它使用document.stylesheets进行Internet Explorer，因为我没有使用跨域css加载来处理它，以及其他浏览器的css的$ .get ajax加载。没有登记，即低于8，但我认为它甚至在那里工作。 窗户上的铬有一些闪烁（vista），但我认为这个和谷歌webfont加载器的组合可以做到这一点。

<link rel="stylesheet" href="//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css" />
<script>
var data = "";
try
{
    data = document.styleSheets[document.styleSheets.length - 1].cssText;
    data = data.replace(/url\(/g, 'url(//fast.fonts.net');
    data = data.replace(/font-family: Geom Slab 703 W01 Light;/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family: GeomSlab703W01-LightIta;/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family: GeomSlab703W01-Medium;/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family: GeomSlab703W01-MediumIt;/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family: Geom Slab 703 W01 Bold;/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family: GeomSlab703W01-BoldItal;/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    document.styleSheets[document.styleSheets.length - 1].cssText = data;
}
catch (e)
{
}

$.get(location.protocol + '//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css', function(data) {
    data = data.replace(/url\("/g, 'url("//fast.fonts.net');
    data = data.replace(/import url\(/, 'import url(//fast.fonts.net');
    data = data.replace(/font-family:"Geom Slab 703 W01 Light";/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family:"GeomSlab703W01-LightIta";/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family:"GeomSlab703W01-Medium";/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family:"GeomSlab703W01-MediumIt";/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family:"Geom Slab 703 W01 Bold";/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family:"GeomSlab703W01-BoldItal";/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    var s = $('<style type="text/css" />').appendTo('head');
    s.html(data);
});
</script>
好的，所以我对目前的项目不需要超过这个快速入侵，但如果有人编写清理/优化的版本，我会很高兴听到它。

答案 5 :(得分：1)

Fonts.com现在有一个“Family Grouping”选项来解决这个问题。我没有彻底调查，但它看起来像是在2013年9月左右发布的。

答案 6 :(得分：-1)

虽然我意识到这是一项更多的工作，但有一种替代方法应该能够实现您的最终结果： Google的WebFont Loader API （我们的服务提供字体）。< / p>

基本上，Google已经构建了一个可以与我们的服务一起使用的AJAX API。优点包括检测字体加载状态的能力 - API根据字体无法加载（非活动），当前是否正在加载（加载）或已成功加载（以及是否已成功加载），根据不同的类动态设置页面的HTML标记样式（活性）。然后，您可以使用一些聪明的CSS规则来利用这些类。

可在我们的blog post和Google's documentation上找到更多信息。

答案 7 :(得分：-1)

作为对原始问题的评论，罗伯特给出了最佳答案。 Fonts.com正在使用最受欢迎的@ font-face版本（此时），由于不支持跨浏览器，因此不使用字体权重声明。

相关问题
最新问题