CSS Twitter Bootstrap - 使用衬线字体

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11361294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:24:26  来源:igfitidea点击:

Twitter Bootstrap - Use serif fonts

csstwitter-bootstrapfonts

提问by Judson

I'm using Twitter Bootstrap for a site design and I would like all of the display fonts to use serif (rather than the default sans-serif) font faces. Is there some way to do this without having to recompile via LESS? I would really like to avoid learning LESS for something this basic.

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

采纳答案by Calvein

You have to change the LESS variable @baseFontFamily, it's default value is @sansFontFamilyyou juste have to set it to @serifFontFamily.
If you don't want to use LESS you can still change those variables in the Customizemenu in the docs.

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

回答by Terry

If you don't mind changing the bootstrap.css, do a find & replace on:

如果您不介意更改 bootstrap.css,请执行查找和替换:

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

replace with:

用。。。来代替:

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

If you don't want to do that, add this code to your custom CSS to override Bootstrap's.

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

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

回答by Jay

May I also recommend adding headers in there too...

我也可以建议在那里添加标题吗...

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

回答by Neelansh Mathur

It depends on whether you use Bootstrap by CDN or you downloaded it. If you downloaded it, you must be having either boostrap.cssor boostrap.min.cssIn those, You will find:

这取决于您是通过 CDN 使用 Bootstrap 还是下载了它。如果您下载了它,您必须拥有boostrap.cssboostrap.min.css在那些中,您会发现:

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

Replace it with the font you want, it's thatsimple!

换成你想要的字体,就是这么简单!