css – 有没有办法修复fonts.com @ font-face声明?

前端之家收集整理的这篇文章主要介绍了css – 有没有办法修复fonts.com @ font-face声明?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
许多流行的字体似乎可以从 http://webfonts.fonts.com/专用于网络使用

但是,它的工作原理非常奇怪.他们不给你直接的字体URL,而是给你一个引用字体文件的CSS文件.我认为CSS中的字体URL可能是短暂的,随着时间的推移而改变,以防止未经授权的使用.所以你必须使用他们的CSS,你不能直接合并字体文件的URL(据我所知).

CSS反过来不是我认为应该的.而不是(简化):

  1. @font-face {
  2. font-family: "Foo";
  3. font-weight: bold;
  4. src: url("foo-bold-variant.ttf");
  5. }
  6.  
  7. @font-face {
  8. font-family: "Foo";
  9. font-weight: normal;
  10. src: url("foo-normal-variant.ttf");
  11. }

它是:

  1. @font-face {
  2. font-family: "Foo Bold";
  3. src: url("foo-bold-variant.ttf");
  4. }
  5.  
  6. @font-face {
  7. font-family: "Foo Normal";
  8. src: url("foo-normal-variant.ttf");
  9. }

因此,您不能这样做:

  1. body {
  2. font-family: "Foo",sans-serif;
  3. }

相反,任何地方使用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:

  1. FontsComLoader.load('HelveticaNeueFontsCom','https://fast.fonts.net/cssapi/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.css',{
  2. 'W02-55Roma': '400','W02-75Bold': '700'
  3. });

在你的CSS:

  1. .helvetica-regular,.helvetica-bold {
  2. font-family: 'HelveticaNeueFontsCom','Helvetica Neue',Helvetica,Arial,sans-serif;
  3. }
  4.  
  5. .helvetica-regular {
  6. font-weight: 400;
  7. }
  8.  
  9. .helvetica-bold {
  10. font-weight: 700;
  11. }

猜你在找的CSS相关文章