Css 将google字体url替换为生成的字体squirrel字体工具包

我已经编写了一个使用yaml css框架的web应用程序。yaml css文件中的一行是

@导入url（）

我的公司的互联网速度非常慢，我想用本地版本的字体替换下载的内容

为了实现这一点，我下载了DroidSans和DroidSerif字体。我得到的文件是

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

然后我转到并为我所有的DroidSerif字体创建了一个字体工具包，为我所有的DroidSans字体创建了一个字体工具包

我现在有点被卡住了，因为看一下生成的字体工具包中的演示，他们为每个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使用的字体重量样式

---

如果您首先访问您拥有的站点：，并查看生成的代码，那么将非常感谢

您可以意识到您需要：

下载以下4个文件：

适当重命名所有字体，并将其放入

font

文件夹：

• 字体/DroidSans粗体.woff

• 字体/DroidSerif.woff

• 字体/DroidSerif粗体.woff

• 字体/DroidSerif斜体.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');
}

---

你必须将所有字体组合成一个单一的字体文件，并从该文件生成webfonts。哦，上帝。我很尴尬。我没想到把url放在浏览器里看看会出现什么。但现在一切都变得有意义了，因为那个url是一个css导入，所以它应该导入一段css。我照你的建议做了，效果很好。非常感谢。至少在调查如何做到这一点的过程中，我发现了如何使用字体松鼠。它可能在未来派上用场。