使用 Bootstrap 类设置字体粗细

Posted 2023-03-05

【中文标题】使用 Bootstrap 类设置字体粗细

【英文标题】：Set font-weight using Bootstrap classes

【发布时间】：2013-10-06 06:14:35

【问题描述】：

font-weight: bold 和 font-weight 的其他值是否有任何 Twitter Bootstrap 类？

如果 Bootstrap 中已经存在，我不会创建一个新的。

【问题讨论】：

没有类，需要自己自定义。

是的，Font-weight:bold 没有单独的类

【参考方案1】：

我在 Bootstrap website 上找到了这个，但它真的不是 Bootstrap 类，它只是 html。

<strong>rendered as bold text</strong>

【讨论】：

此外，strong 不一定意味着粗体。来自developer.mozilla.org/en-US/docs/Web/HTML/Element/strong：“通常，此元素默认使用粗体字体粗细呈现。但是，不应仅将其用于应用粗体样式；为此目的使用 CSS 字体粗细属性。”

Strong 是强，粗体是粗体 :(@GurgenHakobyan 的回答应该是首选。

这是从没有 CSS 的过去开始的。由于关注点分离设计模式，发明了 CSS 以避免在 HTML 中混合内容和表示。尽管网络浏览器仍然支持向后兼容，但强烈建议不要使用 和 、 和 等。en.wikipedia.org/wiki/Cascading_Style_Sheets

【参考方案2】：

在Bootstrap 4 中，class="font-weight-bold" 就是您要查找的内容。

对于其他样式，还有font-weight-normal 和font-italic 类。

【讨论】：

哦，真可爱！您能否改进您的答案以提及这将在 Bootstrap 4 中发生，并为当前版本添加解决方案（使用<strong> 并创建您自己的类）？那我会标记你的答案。

另外（在 Bootstrap 4 中）您可以将建议的类（“font-weight-bold”）添加到 <input/> 框中，其中的文本将变为粗体。我们将此与标题字段一起使用，以便在必要时强调它们。在 Chrome ver76 和 IE11 的 Windows x64 中测试。

酷，酷的人。有用！！！我确实尝试通过手动将样式添加到 css 文件来使内容变粗，但它没有发生。然后我找到了你的答案：D

该拉取请求中没有text-weight-italic。在 Bootstrap 中，有text-italic。此类设置 css 属性 font-style 而不是 font-weight，并且可以与任何 font-weight-properties 一起使用。

不应该是“font-weight-normal”而不是“text-weight-normal”吗？

【参考方案3】：

在 Bootstrap 4 中：

class="font-weight-bold"

或者：

<strong>text</strong>

【参考方案4】：

在您的 Site.css（或其他地方）中创建一个名为 .font-bold 的新类并将其设置为您的元素

.font-bold 
  font-weight: bold;

【讨论】：

我建议不要这样做，标记应该是语义的，例如：.some-functional-description-of-the-element font-weight:bold 。与其只使用一个名字有点像css的类，只使用style="font-weight:bold;"，更诚实的说是快n脏。

这是一个完美的解决方案，并且与许多其他 Bootstrap 类（如 .text-uppercase 或 .list-unstyled）具有相同的语义。内联样式可能会成为管理的噩梦，例如，如果您后来决定所有粗体元素都应该是不同的颜色或具有文本效果。上课会让这件事变得更容易，这是最好的答案。

我同意安迪的观点。这正确地回答了这个问题。当使用通用类提供最干净的 html 输出时，有一些有效的用例，其中使用了生成器、工具包和模板。

这是引导程序的正确解决方案 strong is not to make text bold 的目的，浏览器这样做是因为约定是强调强调的粗体文本。 HTML 标签必须具有语义意义，而不仅仅是为了设计目的而存在。事实上，W3 推荐中并没有引用它，甚至 b shouldn't be relied to be bold。

这在 bootstrap 4 中已经过时了

【参考方案5】：

在 Bootstrap 4 上，您可以使用：

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>

【参考方案6】：

如果使用Boostrap 5，最准确的方法如下：

<p class="fw-bold">Bold text.</p>

【讨论】：

确切来源：getbootstrap.com/docs/5.1/utilities/text/…

【参考方案7】：

如果您想要一个更自定义的值和/或您正在遵循需要重复的方案，您应该使用 bootstarp 的变量来控制您的字体粗细； 变量在整个项目中用作集中和共享常用值（如颜色、间距或字体堆栈）的一种方式；

您可以在http://getbootstrap.com/css 找到所有文档。

【参考方案8】：

如果您在 Mac 版本的 Chrome 中检查此内容，我认为存在一些浏览器不兼容问题。

试试这个

* -webkit-font-smoothing: antialiased;