但是,它的工作原理非常奇怪.他们不给你直接的字体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-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-weight和font-style CSS属性.而不是使用font-weight,您必须为“mybold”创建一个自定义的CSS类,或者将font-family设置为“Foo Bold”.即他们打破标准CSS. (我还缺少什么？)
也许他们会解决这个问题.但在此期间,任何人都可以想到一个理智的解决方法？没有办法用他们的“Foo Bold”等来定义家庭“Foo”.@ font-face的定义是吗？写一些疯狂的JavaScript来从他们的CSS中抽取URL,然后动态定义我自己的@ font-face？
(“使用不同的字体与另一个服务”不算作答案;-)是的,我已经想到了,但我想知道是否有办法“修复”webfonts.fonts.com通过某种方式调整他们的CSS与我自己的CSS规则或JavaScript.)
解决方法
它基于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;
}
