0

我最近直接从 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>

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

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

4

1 回答 1

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)会使它的大小加倍。

于 2021-12-26T00:29:49.760 回答