在 twitter bootstrap 中使用不同的字体答案

【问题标题】：Using a different font with twitter bootstrap在 twitter bootstrap 中使用不同的字体
【发布时间】：2013-09-15 10:51:09
【问题描述】：

我想为我的网站使用不同的字体，这不是常规的网络字体。我已经创建了 EOT 文件。现在如何将这些字体与 twitter bootstrap 集成？有人可以帮忙吗？

谢谢

【问题讨论】：

我建议再次尝试使用谷歌。或本页顶部的搜索。您会发现大量相同主题的结果。提示：“网站上的自定义字体”。
谢谢，我知道如何在网站上使用自定义字体。但这不是问题所在。我问如何与 twitter bootstrap 集成。
如果您已经知道如何使用它们，我不明白问题出在哪里。您可以将它们与 twitter bootstrap 一起使用，就像在任何其他网站中使用它们一样。
@dxenaretionx 如果您认为某些答案有效，您应该花时间接受它们。
@mMoovs 他试图找出他需要覆盖的类等。这就是为什么我也在这里。

标签： css html twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

我见过的最简单的方法是使用Google Fonts。

转到 Google Fonts 并选择一种字体，然后 Google 会给您一个链接以放入您的 HTML。

然后将其添加到您的 custom.css 中：

h1, h2, h3, h4, h5, h6 {
    font-family: 'Your Font' !important;
}
p, div {
    font-family: 'Your Font' !important;
}

或

body {
   font-family: 'Your Font' !important;
}

【讨论】：

【解决方案2】：

你可以在官网上找到一个定制器，它允许你设置一些LESS变量，如@font-family-base。在布局中链接您的自定义字体，并使用您自定义生成的引导样式。

Link here

以@font-face 规则为例，使用 WOFF 格式（这对于浏览器兼容性非常好），将此 CSS 添加到您的 app.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');
}

Please note Proxima Nova is under a license.

【讨论】：

非常感谢您的回答。我看到我可以在自定义页面中添加不同的字体名称。但是如何包含文件？或者它会自动从 name 获取？我正在尝试使用“Proxima Nova”字体。你能说得具体一点吗？
您需要手动包含字体文件。这个生成器只是确保你没有覆盖 CSS 规则。

【解决方案3】：

您好，您可以在 bootstrap 上创建自定义构建，只需在以下页面中更改字体名称

引导程序 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables

引导程序 3 http://getbootstrap.com/customize/#less-variables

之后，确保在 css 文件中使用正确的 @font-face 并将其链接到您的页面。或者你可以使用字体工具包生成器。

【讨论】：

【解决方案4】：

您可以自定义 twitter bootstrap css 文件，在文本编辑器上打开 bootstrap.css 文件，然后使用您的字体名称更改字体系列并保存。

或者到 http://getbootstrap.com/customize/ 并制作一个自定义的 twitter 引导程序

【讨论】：

非常感谢您的回答。我看到我可以在自定义页面中添加不同的字体名称。但是如何包含文件？或者它会自动从 name 获取？我正在尝试使用“Proxima Nova”字体。你能说得具体一点吗？
使用字体源属性
@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ }

【解决方案5】：

首先，您必须使用适当的@font-face 规则在您的网站（或者更具体的 CSS）中包含您的字体。
从这里开始，有多种方法可以继续。我会不做的一件事是直接编辑 bootstrap.css - 因为一旦您获得更新的版本，您的更改将丢失。但是，您确实可以自定义引导文件（他们的网站上有一个自定义页面）。只需将带有所有后备名称的字体名称输入到相应的排版文本框中。当然，每当您获得引导文件的新版本或更新版本时，您都必须这样做。
您还有另一个机会是在不同的样式表中覆盖引导规则。如果您这样做，您只需要使用与引导选择器一样具体（或更具体）的选择器。
旁注：如果您关心浏览器支持，您的字体的单个 EOT 版本可能还不够。有关支持表，请参阅 http://caniuse.com/eot。

【讨论】：