12

许多流行的字体似乎可以从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"<strong>font-stylefont-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/

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

也许他们会在某个时候解决这个问题。但与此同时,谁能想到一个理智的解决方法?没有办法根据他们的“Foo Bold”等@font-face定义家庭“Foo”。定义在那里?编写一些疯狂的 JavaScript 从他们的 CSS 中提取 URL,然后动态定义我自己的 @font-face?

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

4

8 回答 8

3

2014/01/16 更新: Fonts.com 现在支持标准字体嵌入。以下仍然可以正常工作,但在很大程度上被第一方支持所消除。


首先,请注意 Fonts.com 现在声称家庭分组正在“进行中”。然而,与此同时,实际上可以@font-face使用 Fonts.com 提供的套件进行正常的家庭嵌入。 [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指出这需要澄清。
于 2013-10-04T17:29:58.177 回答
3

可悲的是,将近两年后这仍然是一个问题,Fonts.com 没有立即计划改变他们声明字体的方式(在 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,但它确实有效。

于 2013-02-15T18:07:04.860 回答
2

我为 Fonts.com 编写了一个小型 Javascript 加载器,它允许每个字体系列有多个权重。它基于 rossi 的方法,但转换为可重用的脚本。查看此 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;
}
于 2013-10-05T16:48:08.970 回答
1

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

于 2012-02-21T09:35:26.727 回答
1

我这样做了:(没有费心清理代码,这可能会更好/更通用,但无论如何我都会发布它,你会明白的)它使用 document.stylesheets 用于 Internet Explorer,因为我没有'不要让跨域 css 加载与它一起工作,以及 css 的 $.get ajax 加载用于其他浏览器。没有签入即低于8,但我认为它甚至可以在那里工作。windows(vista)上的chrome有一些闪烁,但我认为结合使用这个和google webfont loader可以解决问题。

<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>

好的,所以对于我当前的项目,我只需要这个快速破解,但如果有人编写清理/优化版本,我会很高兴听到它。

于 2013-08-20T11:19:07.660 回答
1

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

于 2014-01-02T16:57:23.550 回答
-1

Robertc 给出了最佳答案作为对原始问题的评论。Fonts.com 正在使用最被接受的@font-face 版本(目前),由于对跨浏览器的支持参差不齐,它没有使用字体粗细声明。

于 2012-12-06T00:10:24.000 回答
-1

虽然我意识到这需要做更多的工作,但还有一种替代方法可以实现您想要的最终结果:Google 的 WebFont Loader API(我们的服务提供字体)。

从本质上讲,Google 已经构建了一个 AJAX API,您可以将其与我们的服务一起使用。优点包括检测字体加载状态的能力——API 根据字体是否加载失败(非活动)、当前正在加载(加载)或已成功加载(积极的)。然后,您可以使用一些巧妙的 CSS 规则来利用这些类。

更多信息可以在我们的博客文章Google 的文档中找到。

于 2011-05-19T15:29:20.613 回答