css – 有没有办法修复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规则来更改家庭,例如< 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.)

解决方法

我为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;
}

原文地址：https://www.jb51.cc/css/216392.html