base64 шрифт отличается от двоичного шрифта

Question

Я вижу странное изменение в рендеринге шрифта, когда он закодирован как base64.

Чтобы улучшить производительность страницы, я работаю над сохранением веб-сайтов моего сайта как данных base64 в localStorage с использованием метода, такого как Smashing Magazine's. JS довольно прост. Но когда я преобразовываю данные woff шрифта в base64, шрифт в моих заголовках визуализируется по-разному.

Вот как выглядит двоичный шрифт:

И это то, что происходит в base64:

В каждом случае HTML тот же:

<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> 

и 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); 
} 

Мой разведчик-light.woff шрифт содержит двоичные данные, такие как:

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 

Я загрузки файла Woff here и вставить его в мой шрифта CSS вот так:

@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; 
} 

Итак, я бы предположил, что закодированные данные хорошо соответствуют незарегистрированным данным. И это единственное различие. Может ли кто-нибудь предложить, почему я вижу это изменение в рендеринге, когда все это отличается от кодировки данных шрифтов? Должен ли я кодировать, используя другой метод?

Пример версии base64 here.

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

Я обнаружил, что кодировка шрифта как base64 определенно связана с ухудшением качества. Мои клиенты жалуются, что одинарные кавычки теперь расположены слишком высоко над базовой линией. Мне придется отказаться от хранения шрифтов локально.

Посмотрите, что происходит с 'before' This 'в этом примере. Кодирование закручивает его.

Answer 1

Трудно смотреть на без живого примера, но вы пробовали добавлять высоту строки в поверочном теге

Линии Heigh должна быть 100%, а в поверочном теге.

.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); 
}