Internet Explorer CSS Line Height For MusiSync Font

Question

I'm trying to use the MusiSync font to embed a sharp and flat symbol in a line of text. In order to keep these symbols from being tiny I have to make their point size twice the size of the rest of the text. Unfortunately, this messes up the line height in Internet Explorer and I cannot find a way to control it. You can download the MusiSync font at:

http://www.icogitate.com/~ergosum/fonts/musicfonts.htm

My attempt to use this font in a web page can be found at:

http://www.williamsportwebdeveloper.com/MusiSync.htm

Answer 1

I opened up Photoshop and used the font you link to. There is a huge amount of white-space above each glyph in the font itself. The font is poorly designed.

If you set your style to this, you'll see the issue:

.style2 {
    font-family: MusiSync;
    font-size: 24pt;
    border:1px solid #000000;
}

The problem appears in FireFiox 3 as well, its just manifesting itself a little differently.

You may be able to hack your way around this somehow, but it's going to be ugly. Unless you're using a lot of different font sizes, you may be better of using images.

Answer 2

Seeing that you are trying to use a very uncommon font, why not implement sIFR?

It will (possibly) solve some of your line height issues as well.

Read up here.

Answer 3

sIFR is an excellent choice for non-standard fonts.

You embed the font in a flash movie (don't worry most of the work is done for you) and add a bit of code to your page and the sIFR javascript will replace classes/id/tags etc with a flash movie containing the text/font that you're aiming for:

From http://www.mikeindustries.com/blog/sifr/

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

An excellent cross browser platform indepent solution for non-standard fonts.