css - Twitter Bootstrap - 使用衬线字体

Question

我正在使用 Twitter Bootstrap 进行网站设计，我希望所有显示字体都使用 serif（而不是默认的 sans-serif）字体。有什么方法可以做到这一点而不必通过 LESS 重新编译？我真的很想避免为这个基本的东西学习 LESS。

Answer 1

如果您不介意更改 bootstrap.css，请在以下位置进行查找和替换：

"Helvetica Neue", Helvetica, Arial, sans-serif;

用。。。来代替：

Georgia, "Times New Roman", Times, serif;

如果您不想这样做，请将此代码添加到您的自定义 CSS 以覆盖 Bootstrap。

body,
input,
button,
select,
textarea,
.navbar-search .search-query {
  font-family: Georgia, "Times New Roman", Times, serif;
}

Answer 2

您必须更改 LESS 变量@baseFontFamily，它的默认值是@sansFontFamily您必须将其设置为@serifFontFamily.
如果您不想使用 LESS，您仍然可以在文档的自定义菜单中更改这些变量。

Answer 3

我是否也建议在其中添加标题...

    body,
    h1,h2,h3,h4,h5,h6,
    input,
    button,
    select,
    textarea,
    .navbar-search .search-query {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 2.2em;
    }

Answer 4

这取决于您是通过 CDN 使用 Bootstrap 还是下载了它。如果你下载了它，你必须有boostrap.css或者boostrap.min.css 在那些，你会发现：

    /*some element*/{
        font-family: /*some font names*/
    }      

换成你想要的字体，就这么简单！