Вопросы Теги

Преобразование и рендеринг веб-шрифтов в base64 - сохраните оригинальный внешний вид

Я хочу отложить загрузку шрифтов на своем сайте, вдохновленную логикой отложенной загрузки шрифтов для журнала Smashing Magazine .

Основная часть этого - конвертация шрифтов в base64 и подготовка вашего CSS-файла. Мои шаги на данный момент:

  1. Выберите шрифты в Google Web Fonts и загрузите их.
  2. Используйте Font Squirrel Webfont Generator для преобразования загруженных файлов TTF в файл CSS со встроенными шрифтами WOFF base64 (Параметры эксперта -> CSS -> Кодировка Base64).
  3. Загрузка асинхронного файла CSS (здесь не важно).

Фрагмент CSS для Open Sans Bold: 

@font-face {
  font-family: 'Open Sans';
  src: url(data:application/x-font-woff;charset=utf-8;base64,) format('woff');
  font-weight: 700;
  font-style: normal;
}

Проблема заключается в , что преобразованные шрифты выглядят очень по-разному . Взгляните на Open Sans Bold: GWF vs base64 rendering comparison

Особенно заметны акценты, которые находятся далеко, и абсолютно ужасная буква a. Другие семейства шрифтов и варианты также выглядят очень заметно по-другому (искажения размера и формы и т. Д.).

Итак, вопрос такой: Как правильно кодировать файлы TTF из Google Web Fonts (или другого источника) в формат base64 и использовать его так, чтобы результат был идентичен исходному файлу?

39
задан smajl 30 January 2019 в 05:45
поделиться