Search code examples
cssinternet-explorerfontsmicrosoft-edgewebfonts

Which feature to test in IE/Edge font support?


For an online demo (project) I wosh to pretend an LCD display. I found a fine 7segment font https://fontlibrary.org/en/font/segment7 . One of it's fetures is that the decimal dot uses some kind of "negative kerning" (or letter-spacing, please apologize my lack of terminology), so it visually belongs to previous number. This is desired behaviour.

However, this behaviour works only in FF & Chrome, not in Edge/IE ( see https://jsfiddle.net/jan_koupil/o1c8srt1/2/)

@import url(//fontlibrary.org/face/segment7);
#display {
  font-family: 'Segment7Standard', sans-serif;
  font-size: 30px;
  border: 1px solid black;
  padding: 3px 5px 1px;
  width: 142px;
  text-align: right;
}
…
<div id="display">8.8.8.8.8.8.8.8.</div>

For these browsers I need to switch the font to a different variant or at least reduce font size in order to fit into the fixed size display DIV. My trouble is that everybody recommends testing features, not browser versions but I don't know which feature to test.


Solution

  • This could be due to missing kerning in Internet Explorer. See this answer on how to explicitly add kerning to the text rendering for IE. You might also check other Opentype features and how they are activated via CSS.