Geek Answers Handbook

Chrome ligatures: only displayed when adding other characters

I created a font with icomoon

and I wanted to use ligatures. Currently, all my ligatures have hyphens in the ligature code. For example: my-ligature

enter image description here

Therefore when i use

<i>my-ligature</i>

It works in both Firefox and IE, but not in Chrome. When I add & nbsp; or any other character, for example

 <i>my-ligature&nbsp;</i> <i>my-ligature </li>

It also works in Chrome.

As soon as I replace the hyphen in the ligature code with something else, like an underscore, it works in Chrome, as expected (without spaces, etc.)

Is this a Chrome bug, or are hyphens not allowed here?

Here you will find a demo (made with the standard icomoon icon) http://www.swisscocktailblog.ch/icomoon/demo.html

EDIT: At the request of css for the ligatures (this is the one used in the demo)

 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?6mfq3a'); src:url('fonts/icomoon.eot?#iefix6mfq3a') format('embedded-opentype'), url('fonts/icomoon.ttf?6mfq3a') format('truetype'), url('fonts/icomoon.woff?6mfq3a') format('woff'), url('fonts/icomoon.svg?6mfq3a#icomoon') format('svg'); font-weight: normal; font-style: normal; } i, .icomoon-liga { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Enable Ligatures ================ */ letter-spacing: 0; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-wifi-full:before { content: "\e600"; }
+6
source share
2 answers

This error was identified elsewhere in Chromium and more specifically affects ligatures named with non-alphabetic characters:

https://bugs.chromium.org/p/chromium/issues/detail?id=277677

It has been marked as fixed in this thread, but this does not seem to be the case.

In anticipation, I checked if the character was, but was not visible, changing the distance between the letters, and it worked. Something insignificant as below:

 i { letter-spacing: .001em; }

If you apply this style to the demo page via devtools and check the two i elements, you will see that the second is like a ribbon compared to the first. If you add text after each, you will see that the text starts at a different point. To avoid this, you can write more CSS, something like this:

 i { display: inline-block; letter-spacing: .001em; width: 1.2em; }

This should ensure that all of your icons are displayed in sequence, despite the error, and scale correctly with the font size. But at this point, it is probably best to accept as a best practice that ligatures should avoid characters other than the alphabet.

While the cause of the error is still unclear, the above should provide a workable solution. The reason that extra characters allow the icon to be displayed is because they provide the space between characters created by the extra CSS here.

+4
source

We also have the same problem in Angular 4 when creating our own icon in chrome 59.0. using css property

 { white-space : pre; }

really resolves this. Mozilla 54.0.1 is working fine.

+1
source

More articles:


All Articles