问题
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.
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:
So, my questions are:
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)
is there any way I can avoid the ligatures taking effect within the
option-tag? (as you see in the sample, I am already usingfont-variant-ligatures: none;in the CSS)
回答1:
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.
来源：https://stackoverflow.com/questions/57348677/how-to-avoid-ligatures-within-option-tag