将新的字体系列添加到Twitter Bootstrap

Nor*_*man 2 css fonts twitter-bootstrap

如何按照他们的方式为twitter bootstrap添加新的字体系列?他们使用一种叫做woff的东西.我正在尝试将roboto浓缩添加到.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');
}
Run Code Online (Sandbox Code Playgroud)

我到处搜索,但无法找到如何做woff的事情.

Hel*_*rse 8

创建一个新的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');
}
Run Code Online (Sandbox Code Playgroud)

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

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

我希望它有所帮助

  • 使用http://www.fontsquirrel.com/tools/webfont-generator将此字体转换为所需的其他格式。它将为您生成所有格式,包括css文件 (2认同)