【问题标题】:Bootstrap5 icons font-weightBootstrap5 图标字体粗细
【发布时间】:2022-01-25 17:05:09
【问题描述】:

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

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

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

【问题讨论】:

    标签: bootstrap-5 bootstrap-icons


    【解决方案1】:

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

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

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

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

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

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

    【讨论】:

    • 谢谢!我现在有点记得我曾经使用过字体。我做了一些检查,但仍然无法弄清楚 bootstrap 5 和 bootstrap 3 的图标在方法上的区别。我尝试了变换比例的东西,问题是它使图标变大但它并没有使它变厚,这是我想要完成的。在我继续寻找的同时,我会使用它作为解决方法。再次感谢!
    • @onzinsky 也许text-shadow 没有模糊值可能是解决方案
    • 这确实是一个更好的解决方法!谢谢!
    猜你喜欢
    • 2013-07-24
    • 2017-01-20
    • 2014-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多