如何避免选项标签中的连字? [英] How to avoid ligatures within option-tag?
问题描述
我想创建一个吸引人的选择对话框，其中显示FontAwesome-Icons和一个描述该符号的单词，以便从各种比例中选择统计数据.
I'd like to create a visually appealing select-dialog that shows FontAwesome-Icons and a word describing the symbol to select from various scales for statistical data.
所以我在select标签上使用FontAwesome-Fonts，在各种符号上使用unicode-glyph.第一部分效果很好.
但是我正在使用的词在FonAwesome中也用于形成连字，也可以用来获取图标(我认为这仅限于声明他们"...不愿意考虑使用Web字体和CSS的连字".
So I'm using the FontAwesome-Fonts for the select-tag and the unicode-glyphs for the various symbols. That first part works nicely.
But the words I am using are also used in FonAwesome to form ligatures that can also be used to get the icons (I thought this was limited to the desktop-version, but as my example prooves, it also happens on the web). The FA-Site states that they are "...aren't comfortable considering ligatures for Web Fonts + CSS".
请在此处或屏幕截图中查看我的小提琴:
Please check out my fiddle here or the screenshot:
所以，我的问题是:
-
如果Webfonts/CSS不应该发生这种情况-使用它们是否有我做错的地方? (当然，我的计算机上安装了桌面字体，我想我们不知道网站的用户是否拥有它们)
if it's not supposed to happen with Webfonts/CSS - is there anything that I am doing wrong using them? (Of course I have the desktop-fonts installed on my machine, I guess we won't know if users of the website will have them or not)
有什么方法可以避免连字在option标签中生效? (如您在示例中所看到的，我已经在CSS中使用font-variant-ligatures: none;了)
is there any way I can avoid the ligatures taking effect within the option-tag? (as you see in the sample, I am already using font-variant-ligatures: none; in the CSS)
推荐答案
我找到了一种解决方法，方法是使用不同的名称定义专用的@font-faces. (我的理论是Chrome使用我安装的本地字体，并且它的连字覆盖了我在CSS中所做的一切).肯定不会在本地找到特殊字体".
I found a way to solve this by defining dedicated @font-faces with a different name. (My theory is that Chrome uses the local font I have installed and that it's ligatures override everything I do in CSS). That "special font-face" is sure not to be found locally...
如果有人找到更好的解释或解决方法，我会很乐意接受.
If someone finds a better explanation or fix, I'll happily accept it.
这篇关于如何避免选项标签中的连字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
