Преобразование и рендеринг веб-шрифтов в 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,<base64_encoded>) format('woff');
  font-weight: 700;
  font-style: normal;
}

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

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

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

Ответы

Ответ 1

В параметрах Font Squirrel Expert обязательно установите для параметра "TrueType Hinting" значение "Keep Existing". Любой из других параметров приведет к изменению инструкций (подсказок) TrueType, что, в свою очередь, повлияет на рендеринг шрифта.

Альтернативно, если вы довольны визуализацией шрифта непосредственно из GWF, вы можете просто взять этот файл и сделать кодировку base64 самостоятельно. В OS X или Linux используйте встроенную команду base64 в Terminal/shell:

$ base64 myfont.ttf > fontbase64.txt

Для Windows вам необходимо загрузить программу для кодирования в base64 (доступно несколько бесплатных/открытых исходных инструментов). Скопируйте содержимое этого файла, а затем используйте в своем CSS как:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

(Обратите внимание, что вам может потребоваться внести некоторые изменения в различные данные шрифта @font-face, чтобы они соответствовали вашим данным шрифта, это всего лишь примерный шаблон)