34

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

谢谢

4

5 回答 5

50

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

转到谷歌字体并选择一种字体，然后谷歌会给你一个链接来放入你的 HTML。

Google 指向您的字体的链接

然后将其添加到您的 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;
}
于 2014-02-28T20:31:26.027 回答
14

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

链接在这里

对于@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');
}

请注意 Proxima Nova 已获得许可。

于 2013-09-11T12:12:03.090 回答
3

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

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

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

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

于 2013-09-11T12:28:14.030 回答
2

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

或访问http://getbootstrap.com/customize/并制作定制的 twitter 引导程序

于 2013-09-11T12:10:36.283 回答
0

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

于 2013-09-11T12:23:39.653 回答