Having two simple elements and CSS like here in JSFiddle:
<span class="text">f</span><span class="text">fl</span>
.text {
font-family: "Helvetica Neue"
}
When running the code in Chrome, the first span width covers all of the text while the second span width is 0. When I change the font to Helvetica, both spans have correct and expected width appropriate to the text within them.
My understanding is that it is somehow related to ffl | Latin small ligature and my guess is that the former font contains the ffl ligature while the latter does not.
Is there a way how to work-around it and selectively disable transformation of certain Unicode characters while using "Helvetica Neue"? Or do I simply need to use a different font?
Just found that font-variant-ligature might be a solution. Its not obvious to me what all ligatures does it affects, though. I need to work-around the issue just for small Latin ligatures. Namely, these Unicode characters:
..but not affect any complex language like Japanese, Arabic etc.
Make the span display:inline-block
.text {
display: inline-block;
}
.text,
.text_old {
background: radial-gradient(white, red);
font-family: "Helvetica Neue";
font-size: 40px;
}<p>With "inline-block"</p>
<span class="text">f</span><span class="text">fl</span>
<p>Without "inline-block"</p>
<span class="text_old">f</span><span class="text_old">fl</span>