Bootstrap5 图标字体粗细

Question

我最近直接从3更新到bootstrap5。是的，我跳过了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

那么您的图标字母应该如何显示为粗体或浅色？为什么它适用于旧的 bootstrap 版本？真的不知道。也许是一些字体实习生设置或 css decleration。但可以肯定的是：你不应该对图标使用这个规则（它不支持它们，顺便说一句，FontAwesome 支持它。）。

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

Answer 2

我一直在测试 Bootstrap 5，但 font-weight 无法与“Bootstrap 5 图标 < i > > ”一起使用。但是使用'-webkit-text-stroke'会得到看起来像'font-weight'的结果。

请试试这个。

    <i class="bi bi-asterisk"></i>
    <style> i:hover { -webkit-text-stroke: 1px; } </style>

工作在Bootstrap 5.

Bootstrap5 图标字体粗细

Bootstrap5 icons font-weight

bootstrap-5

bootstrap-icons