Bootstrap5 图标字体粗细

Question

我最近直接从 3 更新到 bootstrap 5。是的，我跳过了 4。

事情是，早在 3 年，我曾经做过这样的事情。

<i class="glyphicon glyphicon-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

现在，使用 bootstrap5 的图标，这行不通！

显然，我现在正在使用新图标。

<i class="bi bi-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

但正如我所说，它不起作用。

为什么？有没有办法做到这一点？

Answer 1

这是对字体及其工作原理的简单误解。
图标是由字体组成的，所以同样的概念在这里也适用。

通常，当您使用font-weight 设置粗体时，浏览器实际上不会使字体变大一点。不，他们会用类似的字体替换完整的字体。例如：Aria 到 Aria Bold。一个高质量的字体应该至少有 3 个或更好的 6 个版本（Light、Normal、Bold x cursive、non-cursive）

当浏览器找不到另一个font-weight 版本的字体时，它会尝试猜测它应该是什么样子。与font-style 相同。

以文档中italic 和oblique 的区别为例： https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

那么，您的图标字母应该如何看起来像粗体或浅色？为什么它可以在较旧的引导程序版本上运行？真不知道。也许是一些字体实习生设置或 css decleration。但可以肯定的是：您不应该对图标使用此规则（不支持它们，FontAwesome 支持它顺便说一句。）。

一种类似的方法是使用transform: scale(1.05) 来调整DOM 元素的大小。使用scale(2) 会使它的大小翻倍。