如何避免选项标签中的连字？答案

【问题标题】：How to avoid ligatures within option-tag?如何避免选项标签中的连字？
【发布时间】：2019-08-04 17:14:39
【问题描述】：

我想创建一个视觉上吸引人的选择对话框，其中显示 FontAwesome-Icons 和一个描述符号的单词，以便从各种比例的统计数据中进行选择。

所以我将 FontAwesome-Fonts 用于 select-tag 和 unicode-glyphs 用于各种符号。第一部分效果很好。但是我使用的单词也在 FonAwesome 中用于形成连字，也可以用来获取图标（我认为这仅限于 desktop-version，但正如我的示例所证明的那样，它也发生在网络上） . FA-Site states 说他们“……不喜欢考虑 Web 字体 + CSS 的连字”。

请查看我的小提琴here 或截图：

所以，我的问题是：

如果 Webfonts/CSS 不应该发生这种情况 - 使用它们时我做错了什么吗？（当然我的机器上安装了桌面字体，我想我们不会知道网站的用户是否会拥有它们）
有什么办法可以避免连字在option-tag 中生效？（正如您在示例中看到的，我已经在 CSS 中使用 font-variant-ligatures: none;）

【问题讨论】：

你的小提琴实际上并没有表现出太多；它甚至没有 FA 图标。您能告诉我们示例中的哪些单词产生连字吗？
我添加了小提琴的截图（使用最新的 Chrome）。有趣的是它不会为您显示图标。（我知道它在 IOS 上不起作用，但在其他任何地方都可以）

标签： html-select font-awesome-5 ligature

【解决方案1】：

我找到了解决此问题的方法，方法是使用不同的名称定义专用 @font-faces。（我的理论是 Chrome 使用我安装的本地字体，并且它的连字覆盖了我在 CSS 中所做的一切）。那个“特殊字体”在本地肯定是找不到的……

如果有人找到更好的解释或解决方法，我会很乐意接受。

【讨论】：