Musings

The CSS rules (which, purportedly, work with InternetExplorer) are

@font-face {
  font-family: "Charis SIL";
  src: url(/fonts/CharisSIL/CharisSILR.eot);
  src: local('Charis SIL'),
    url(/fonts/CharisSIL/CharisSILR.ttf) format("truetype");
}

@font-face {
  font-family: "Charis SIL";
  src: url(/fonts/CharisSIL/CharisSILB.eot);
  src: local('Charis SIL Bold'),
    url(/fonts/CharisSIL/CharisSILB.ttf) format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "Charis SIL";
  src: url(/fonts/CharisSIL/CharisSILI.eot);
  src: local('Charis SIL Italic'),
    url(/fonts/CharisSIL/CharisSILI.ttf) format("truetype");
  font-style: italic;
}

@font-face {
  font-family: "Charis SIL";
  src: url(/fonts/CharisSIL/CharisSILBI.eot);
  src: local('Charis SIL Bold Italic'),
   url(/fonts/CharisSIL/CharisSILBI.ttf) format("truetype");
  font-weight: bold;
  font-style: italic;
}

The proprietary “.eot” fonts, which work with Explorer, were created using the commandline tool, ttf2eot.

When using a downloadable font, setting the font-size-adjust property seems to be the key to preventing the text from jiggling about, as the font loads from the web. (Users who already have the font installed, locally, won’t notice a jiggle.) What you do is

<span class="set">b</span><span class="adjust">b</span>

and then adjust the font-size-adjust property in the CSS rules

span.adjust{border:1px solid red;font-family:Charis SIL;
  font-size-adjust: 0.49;}
span.set{border:1px solid red;font-family:Charis SIL;}

until the heights of the two rectangles match. Use that font-size-adjust property, everywhere you use font-family:Charis SIL.

Now, the real question is:

Does something like this work for the STIX fonts, so that users can see the MathML, without having to download and install the fonts by hand?

And, I suppose, the next question is:

Why doesn’t IE support ETAGs for downloadable fonts?