按比例减小 Twitter Bootstrap 的标题大小

Question

不确定这是否可能。我认为 Twitter Bootstrap 的标题字体大小太大了。h1 是 36px；h2 是 30px，以此类推。

有没有一种按比例减小标题大小的方法？比如说，我只想要每个标题的大小减少10%。我不想逐个声明每个标题的字体大小。

谢谢。

- Victor

---

我相信Bootstrap设置了一个baseFontSize变量，几乎所有的字体大小属性都是相对于它的，例如：font-size: @baseFontSize * 2; 你可以将其改为更小的值。 - Mark

Answer 1

我知道这个帖子已经过去18个月了，但是如果有人再次遇到这个问题，最新版本的Bootstrap（v3.1.1）将所有标题字体大小设置在less/variables.less中，如下：

@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px

所以，这只是调整每个乘数以产生影响的情况。

- alexkb

---

解决方案：将双括号替换为单括号。在我看来，这是一个错误。 - B. Martin

@B.Martin 上面的代码片段是从bootstrap less/variables.less文件中提取出来的，不是我自己编写的代码。即使在最新版本v3.3.6（非sass）中，代码仍然保持不变。 - alexkb

Answer 2

如果可以通过调整LESS中的变量来实现这一点，那就太好了，但我认为不可能。

从variables.less文件中：

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor

所以您可以通过更改@baseFontSize来缩放所有文本，但不幸的是没有单独的@baseHeaderFontSize。不过您总是可以fork该项目！Edit 2:正如@merv所指出的那样，标题大小应基于2.1.2版本中的@baseFontSize。原始编辑：实际上看起来标题大小已经硬编码了：type.less：

h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }

- RichardTowers

---

我猜测原帖作者正在使用纯CSS。 :) - Praveen Kumar Purushothaman

那么他应该转换到LESS。 :) - RichardTowers

事实上，即使在普通的CSS中，如果这是一个变量，OP可以使用该变量构建自定义bootstrap，并将变量设置为他们希望的值。然而，这不是一个变量。 - RichardTowers

@RichardTowers 看起来在2.1.2版本中，他们将把@baseFontSize与h*标签连接起来。请参见tweet和相关的Gist。 - merv

@merv 啊哈！那么，从2.1.2开始，我的原始答案仍然适用。 - RichardTowers

Answer 3

给 body 添加一个类，并添加以下 CSS：

body.myClass h1,
body.myClass h2,
body.myClass h3,
body.myClass h4,
body.myClass h5,
body.myClass h6 {font-size: 0.9em;}

这将给你原始大小的90％。您还可以将其表示为90％。:)

- Praveen Kumar Purushothaman

---

我相信，这是基于正文字体大小的0.9em或90%，而不是在CSS中其他地方声明的h1字体大小属性。 - Mark

我的担忧是，我认为它不是原始字体大小，而是继承的字体大小。在DOM中，它是正文或父元素的字体大小，具有显式的字体大小。 - Mark

我们在应用程序中使用TBS并且这是我们的重写方法。:) 它适用于IE 7，IE 8，IE 9，FF，GC。这就是为什么我建议使用这种方法！:) - Praveen Kumar Purushothaman

基础字体不是36px，Bootstrap中的基础字体为16px。他想要大约30px的字体大小。 - Mark

现在我真的很困惑！:P 好吧，我的意思是 h1 的基础字体而不是基础字体大小。 :) - Praveen Kumar Purushothaman