base64字体与二进制字体的呈现方式不同

Question

I'm seeing a strange change in the rendering of a font when it's encoded as base64.

To improve page performance I'm working on saving my site's webfonts as base64 data in localStorage using a method like Smashing Magazine's . The JS is pretty straightforward. But when I convert the woff font data to base64 the font in my headlines renders differently.

This is how the binary font looks:

And this is what happens in base64:

In each case the HTML is the same:

<h3 class="title">
    <a href="http://domain.co.uk/sarah-palin-923489/"><span>What happens after Sarah Palin's teleprompter breaks is hardly surprising</span></a>
</h3>

and the CSS:

.title {
    font-size: 26px;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    font-family: ScoutBold, Arial, Helvetica, sans-serif;
    font-weight: normal;
}

span {
    color: white;
    background-color: rgba(126, 211, 33, 0.8);
    box-shadow: 10px 0 0 rgba(126, 211, 33, 0.8), -10px 0 0 rgba(126, 211, 33, 0.8);
}

My scout-light.woff font contains binary data like:

774f 4646 0001 0000 0000 7856 0011 0000
0001 1564 0001 0000 0000 76a0 0000 01b6
0000 02f9 0000 0000 0000 0000 4750 4f53
0000 65d0 0000 0da6 0000 47f2 b51f 87a4

I'm uploading the woff file here and pasting it into my font CSS like so:

@font-face {
  font-family: ScoutLight;
  src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGKIABMAAAAA70AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcak+p20dERUYAAAHEAAAAMgAAADgCIAEQR1BPUwAAAfgAAA3LAABSqL7EBrtHU1VCAAAPxAAAAJIAAAEmGQ8brU9TLzIAABBYAAAA... mCGKVBUG8hLUWlnoKDzARBPFyOqu7sZs3/ye8zwgX1qK/7nqAq+wbV3RzzGSL5YaCo5yhK7YdQ17VyMUS46p+MW4zZomvI+XYSoxD5Qj2xoFyCJGxX9X34KHhEfybhkvwThqOGnP/Z2wqOjuNhMAnPwCm+rMRZVNhiZ43B2KmNqQwZUMmp4ZsNbAg5ouBY2LhGUosxQdf6EtzAAABVCFFcAAA) format("woff"), url("../fonts/scout-light/scout-light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

So I'd assume the encoded data is a good match to the unencoded data. And that's the only difference. Can anybody suggest why I'm seeing this change in the rendering, when all that's different is the font data encoding? Should I encode using a different method?

Example of the base64 version here .

//////////////////////////// EDIT ////////////////////////////

I've discovered that encoding a font as base64 definitely involves some degradation in quality. My customers are complaining that single quotes are now positioned too high above the baseline. I'm going to have to give up on storing fonts locally.

Look at what happens to the ' before "This" in this example. The encoding screws it up.

Answer 1

Hard to look at without a live example, but have you tried adding the line-height to the span-tag

The line heigh should be 100% and in the span-tag.

 .title {
  position: relative;
  z-index: 2;
  font-family: ScoutBold, Arial, Helvetica, sans-serif;
}

.title span {
  line-height: 100%;
  font-size: 25px;
  background-color: rgba(126, 211, 33, 0.8);
  box-shadow: 10px 0 0 rgba(126, 211, 33, 0.8), -10px 0 0 rgba(126, 211, 33, 0.8);
}