Hav*_*c P 12 css html5 webfonts 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-style除此之外还出现了同样的问题font-weight.
他们将此解释为iOS错误的解决方法("这是一个功能!"):http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone -and-ipad的器件/
但是该错误已在iOS 4.2中得到修复:http: //blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/
有了这个设置,除非我失去了一些东西,我不能使用任何第三方的CSS或脚本尝试使用font-weight,因为fonts.com的做法打破了font-weight和font-styleCSS属性完全.您必须为"mybold"或类似的东西组成一个自定义CSS类,而不是使用font-weight,以将font-family设置为"Foo Bold".即他们打破标准CSS.(我错过了什么？)
也许他们会在某个时候解决这个问题.但与此同时,任何人都可以想到一个理智的解决方法吗？没有办法根据他们的"Foo Bold"定义家庭"Foo"等@font-face定义是否存在？写一些疯狂的JavaScript来动态地从CSS中提取URL,然后动态定义我自己的@ font-face？
("使用与其他服务不同的字体"并不算作答案;-)是的我已经想到了,但我想知道是否有办法通过某种方式"修复"webfonts.fonts.com我自己的CSS规则或JavaScript.)
我为 Fonts.com 编写了一个小型 Javascript 加载器，允许每个字体系列使用多个权重。它基于 rossi 的方法，但转换为可重复使用的脚本。查看此要点中的代码和用法。
基本上它从 fonts.com 加载 CSS，根据指定的设置进行修改并附加到<head>文档的 CSS 中。
在你的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;
}