css - 用生成的字体松鼠字体套件替换谷歌字体 url

Question

我编写了一个使用 yaml css 框架的网络应用程序。 yaml css 文件中的一行是....

@import url( http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700 );

我公司的网速很慢，我想用字体的本地副本替换该下载。

为了实现这一目标，我去了 http://www.google.com/fonts , 下载了 DroidSans 和 DroidSerif 字体。我得到的文件是...

• fonts.DroidSerif-Italic.ttf
• fonts/DroidSerif-BoldItalic.ttf
• fonts/DroidSerif-Bold.ttf
• 字体/DroidSerif.ttf
• fonts.DroidSans.ttf
• fonts/DroidSans-Bold.ttf

然后我去了http://www.fontsquirrel.com/tools/webfont-generator并为我所有的 DroidSerif 字体创建了 1 个字体套件，为我所有的 DroidSans 字体创建了 1 个字体套件。

我现在有点卡住了，因为查看生成的字体套件中的演示，他们为每个 ttf 文件提供了不同的字体声明。换句话说，我有很多字体声明...

@font-face {font-family: 'droid_serifbold'; ...
@font-face {font-family: 'droid_serifitalic'; ...
@font-face {font-family: 'droid_serifbold_italic'; ...
@font-face {font-family: 'droid_serifregular'; ...
...and same for droid sans...

但是 yaml CSS 框架不以这种方式使用字体。相反，他们有一个字体定义，然后指定不同的字体粗细...

  body {
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
    ...
  }

  h6 {
    font-family: "Droid Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;

  q {
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
    font-style: italic;

  b {
     font-weight: bold;

我宁愿不更改 yaml css，因为我可能会搞砸它。我的问题是如何更改 font squirrel 字体套件提供给我的字体声明以匹配我的 css 使用的字体粗细样式？

谢谢

Answer 1

如果您首先访问网站:Google Fonts ，并查看生成的代码，

你可以意识到你需要:

下载这 4 个文件:

• Droid Sans Bold

• Droid Serif

• Droid Serif Bold

• Droid Serif Italic

适本地重命名并放置在fonts文件夹中:

• fonts/DroidSans-Bold.woff

• fonts/DroidSerif.woff

• fonts/DroidSerif-Bold.woff

• fonts/DroidSerif-Italic.woff

然后使用这段代码:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('fonts/DroidSans-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url('fonts/DroidSerif.woff') format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url('fonts/DroidSerif-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url('fonts/DroidSerif-Italic.woff') format('woff');
}