将新字体系列添加到 Twitter Bootstrap答案

【问题标题】：Adding a new font family to Twitter Bootstrap将新字体系列添加到 Twitter Bootstrap
【发布时间】：2013-11-14 01:31:48
【问题描述】：

如何按照他们的方式将新字体系列添加到 twitter bootstrap？他们使用一种叫做 woff 的东西。我正在尝试将压缩的机器人添加到 .css 文件中。我怎么能像他们用 woff 那样做呢？

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url("//themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff") format('woff');
}

我到处搜索，但找不到怎么做。

【问题讨论】：

标签： css twitter-bootstrap fonts

【解决方案1】：

创建一个新的 CSS 文件。叫它custom.css。将 CSS 标记内的 CSS 文件链接为外部 CSS 文件。在那里添加您的@font-face 代码，如下所示：

@font-face {
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url("//themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff") format('woff');
}

您的@font-face 代码似乎缺少一些字体/文件。您可以使用Font Squirel 转换您的字体文件并生成相应的CSS 文件。使用该 CSS 文件块。

然后在你的 font-family css 中使用 OpenSans。

希望对你有帮助

【讨论】：

其实我想知道如何为 ROBOTO 做 woff。他们是怎么做 .woff 的？
使用fontsquirrel.com/tools/webfont-generator 将您的字体转换为所需的其他格式。它会为你生成包括css文件在内的所有格式