Twitter Bootstrap - 使用衬线字体

Question

我正在使用Twitter Bootstrap进行网站设计，希望所有显示字体都使用衬线字体（而不是默认的无衬线字体）。有没有一种方法可以在不通过LESS重新编译的情况下实现这个目标？我真的很想避免因为这种基本要求而学习LESS。

我正在使用 Twitter Bootstrap 进行网站设计，我希望所有的显示字体使用衬线字体（而不是默认的无衬线字体）。请问有没有一种方法可以做到这一点，而不需要通过 LESS 重新编译？因为我不想因为这么基础的需求而学习 LESS。

- Judson

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;
}

- Terry

Answer 2

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

- Calvein

---

如果你在使用LESS，那么在Bootstrap 3中需要添加这行代码： @font-family-base: @font-family-serif; （译注：此代码用于定义基础字体家族，将其设置为衬线字体。） - Matty J

Answer 3

这取决于您是使用CDN还是下载了Bootstrap。 如果您下载了它，您必须拥有boostrap.css或boostrap.min.css 在这些文件中，您会发现：

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

将其替换为您想要的字体，就是这么简单！

- Neelansh Mathur

Answer 4

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

    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;
    }

- Jay