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

我一直在测试 Bootstrap 5，字体粗细不适用于“Bootstrap 5 图标

<i></i>

”。但是使用

-webkit-text-stroke

会得到看起来像

font-weight

的结果。

请尝试一下。

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

它适用于 Bootstrap 5。

Answer 2

font-weight

不适用于 Bootstrap 5 图标字体。

正如Bootstrap Icon文档提到的，样式非常有限。

造型 可以通过设置 .text-* 类或自定义 CSS 来更改颜色

您可以使用非标准

-webkit-text-stroke

来进行黑客攻击，它类似于粗体文本。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />

<style>
  .bi-hover-bold:hover {
    -webkit-text-stroke: 1px;
  }
</style>

<p>
  <i class="bi-asterisk bi-hover-bold" role="img" aria-label="Required"></i> Bold-like on hover
</p>

<p>
  <i class="bi-asterisk" role="img" aria-label="Required"></i> Normal, for comparison
</p>

关于悬停时粗体的警告

此 hack 的行为与真正的粗体不同，因为它不会改变字符的大小。因为

font-weight

确实会改变文本流，所以应避免在悬停时使用它，因为悬停时文本可能会移动甚至换行。

可访问性警告

另请参阅 Bootstrap 图标的辅助功能注意事项

如果您想为某个元素设置悬停样式，则表明您可能有一些与其绑定的交互。交互元素需要符合几个标准才能供残疾人或键盘迷使用：

• 它必须是显而易见的，人们可以在视觉上与它互动
• 这还需要通过元素的角色来指示，例如

  button

  或

  link

  ，以接触辅助技术
• 交互也需要与键盘配合，可聚焦
• 要了解激活元素的作用，它需要一个可访问的名称

对于这种情况，最好将图标包裹在按钮中：

<button type="button" class="btn btn-light" aria-label=""><i class="bi-asterisk"></i></button>
<style>
  .btn:hover { -webkit-text-stroke: 1px }
</style>

Answer 3

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

通常，当您使用

font-weight

设置粗体时，浏览器实际上不会只是使字体变大一点。不，他们会用类似的字体替换完整的字体。例如：

Aria

到

Aria Bold

。高质量的字体应该至少有 3 个或更好的 6 个版本（浅色、正常、粗体 x 草书、非草书）

当浏览器找不到另一个

font-weight

版本的字体时，它会尝试猜测它应该是什么样子。与

font-style

相同。

请参阅文档中

italic

和

oblique

的区别作为示例： https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

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

一种类似的方法是使用

transform: scale(1.05)

调整 DOM 元素的大小。使用

scale(2)

会将其大小加倍。

Answer 4

这在我使用 React 时非常有用

笔画：白色； 描边宽度：3px；

Answer 5

在需要的地方设置此样式可实现 Bootstrap 5.3 图标（图标 v1.11.3）的结果。事实上，即使将描边设置为 1px 也会增加默认使用的线条的粗细

-webkit-text-stroke: 2px;