许多流行的字体似乎都可以从 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/
但该错误已在 iOS 4.2 中得到修复: http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/
使用此设置,除非我遗漏了什么,否则我无法使用任何尝试使用 font-weight
的第三方 CSS 或脚本。 ,因为 fonts.com 的方法打破了 font-weight
和 font-style
完全 CSS 属性。您必须为“mybold”或类似的东西创建一个自定义 CSS 类,而不是使用 font-weight,以将 font-family 设置为“Foo Bold”。也就是说,它们破坏了标准的 CSS。 (我错过了什么?)
也许他们会在某个时候解决这个问题。但与此同时,谁能想到一个明智的解决方法?无法根据“Foo Bold”等来定义家族“Foo”。@font-face
有定义吗?编写一些疯狂的 JavaScript 以动态地从他们的 CSS 中提取 URL,然后动态定义我自己的@font-face?
(“对其他服务使用不同的字体”不算作答案;-)是的,我已经想到了,但我想知道是否有办法通过某种方式调整来“修复”webfonts.fonts.com他们的 CSS 与我自己的 CSS 规则或 JavaScript。)
最佳答案
遗憾的是,几乎两年后这仍然是一个问题,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,但它可以工作。
关于css - 有什么方法可以修复 fonts.com @font-face 声明吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5824925/