Html 在 twitter bootstrap 中使用不同的字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18740757/
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
Using a different font with twitter bootstrap
提问by dxenaretionx
I want to use a different font for my website, which is not a regular webfont. I have created EOT files already. Now how can I integrate those fonts with twitter bootstrap ? Can anyone help ?
我想为我的网站使用不同的字体，这不是常规的网络字体。我已经创建了 EOT 文件。现在如何将这些字体与 twitter bootstrap 集成？任何人都可以帮忙吗？
Thanks
谢谢
回答by Kyle Pennell
The easiest way I've seen is to use Google Fonts.
我见过的最简单的方法是使用Google Fonts。
Go to Google Fonts and choose a font, then Google will give you a link to put in your HTML.
转到 Google Fonts 并选择一种字体，然后 Google 会给您一个链接以放置在您的 HTML 中。
Then add this to your custom.css:
然后将其添加到您的 custom.css 中：
h1, h2, h3, h4, h5, h6 {
font-family: 'Your Font' !important;
}
p, div {
font-family: 'Your Font' !important;
}
or
或者
body {
font-family: 'Your Font' !important;
}
回答by zessx
You can find a customizer on the official website, which allows you to set some LESS variables, as @font-family-base. Link your custom fonts in your layout, and use your custom generated bootstrap style.
你可以在官网上找到一个定制器，它允许你设置一些 LESS 变量，如@font-family-base. 在布局中链接自定义字体，并使用自定义生成的引导程序样式。
For an example with the @font-facerule, using WOFF format (which is pretty good for browser compatibility), add this CSS in your app.cssfile andinclude your custom boostrap.cssfile.
以@font-face规则为例，使用 WOFF 格式（这对浏览器兼容性非常好），在您的app.css文件中添加此 CSS并包含您的自定义boostrap.css文件。
@font-face {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(link-to-proxima-nova-font.woff) format('woff');
}
回答by Mon Noval
Hi you can create a customized build on bootstrap, just change the font name in the following pages
嗨，您可以在引导程序上创建自定义构建，只需更改以下页面中的字体名称
Bootstrap 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables
引导程序 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables
Bootstrap 3 http://getbootstrap.com/customize/#less-variables
引导程序 3 http://getbootstrap.com/customize/#less-variables
After that, make sure to use proper @font-face in a css file and link that to your page. Or you could use font kit generators.
之后，确保在 css 文件中使用正确的 @font-face 并将其链接到您的页面。或者您可以使用字体工具包生成器。
回答by Able Alias
you can customize twitter bootstrap css file, open the bootstrap.cssfile on a text editor, and change the font-family with your font name and SAVE it.
您可以自定义 twitter bootstrap css 文件，bootstrap.css在文本编辑器上打开该文件，并使用您的字体名称更改字体系列并保存它。
OR got to http://getbootstrap.com/customize/and make a customized twitter bootstrap
或者访问http://getbootstrap.com/customize/并制作一个定制的 Twitter 引导程序
回答by Onkel Toob
First of all you have to include your font in your website (or your CSS, to be more specific) using an appropriate @font-facerule.
From here on there are multiple ways to proceed. One thing I would notdo is to edit the bootstrap.css directly - since once you get a newer version your changes will be lost. You do however have the possibility to customize your bootstrap files (there's a customize page on their website). Just enter the name of your font with all the fallback names into the corresponding typography textbox. Of course you will have to do this whenever you get a new or updated version of your bootstrap files.
Another chance you have is to overwrite the bootstrap rules within a different stylesheet. If you do this you just have to use selectors that are as specific as (or more specific than) the bootstrap selectors.
Side note: If you care about browser support a single EOT version of your font might not be sufficient. See http://caniuse.com/eotfor a support table.
首先，您必须使用适当的@font-face规则在您的网站（或您的 CSS，更具体地说）中包含您的字体。
从这里开始，有多种方法可以继续。我不会做的一件事是直接编辑 bootstrap.css - 因为一旦您获得更新的版本，您的更改就会丢失。但是，您可以自定义引导程序文件（他们的网站上有一个自定义页面）。只需在相应的排版文本框中输入带有所有后备名称的字体名称即可。当然，每当您获得引导程序文件的新版本或更新版本时，您都必须这样做。
另一个机会是在不同的样式表中覆盖引导规则。如果你这样做，你只需要使用与引导选择器一样（或更具体）的选择器。
旁注：如果您关心浏览器支持，您的字体的单个 EOT 版本可能不够。有关支持表，请参阅http://caniuse.com/eot。
