Base64 @font-face Шрифт с wicked_pdf Генератором

Я пытаюсь использовать определенный шрифт в PDF файле, созданный в формате HTML для PDF, используя wicked_pdf на сайте Rails 3. Я нашел здесь другие советы, за которыми я последовал. Единственное, что (в основном) работало для меня, - это преобразование шрифтов в base64. Я нашел исходный ответ здесь: Wicked PDF + fonts + heroku + rails3.2

Мне пришлось поместить CSS-шрифт @font-face непосредственно в частичный файл, который его использовал, вместо того, чтобы помещать его в таблицу стилей, чтобы он работал. Теперь он отлично работает в моей локальной копии. Когда я развертываю его на нашем промежуточном сервере, он работает только наполовину. Один из шрифтов загружается, но жирная версия шрифта не загружается.

Вот CSS-шрифт @font-face, включенный в частичный (этот pastebin включает в себя весь код Base64 во внеочередном это полезно):

<style type="text/css">
  @font-face {
    font-family: 'MuseoSans300';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQAABAA...excess text removed);
  }
  @font-face {
    font-family:'MuseoSans700';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQAABAA...excess text removed);
  }
</style>

Стили из обычной таблицы стилей (используя SASS), которые используют эти шрифты, выглядят примерно так:

#profile_pdf {
  font-family: 'MuseoSans300';
  h1 {
    font-size: 30px;
    font-family: 'MuseoSans700';
  }
  h2 {
    font-size: 20px;
    font-family: 'MuseoSans300';
  }
}

Я попытался изменить это различными способами. Я использовал то же форматирование, что и этот совет: http://blog.shahariaazam.com/use-google-web-fonts-for-wkhtmltopdf-tools/#.UtwZUmQo5hE

Это заставило его полностью перестать работать.

С форматированием, показанным выше, он работает на моей локальной копии. На промежуточном сервере работает только один из шрифтов; он загружает все только в версии 300, а версия 700 не загружается. Кто-нибудь еще сталкивается с этой проблемой?

Ответ 1

У меня была аналогичная проблема с Wicked PDF. То, как я решил, это определить семейство шрифтов с каждым весом, который я хотел настроить. Это выглядело так:

@font-face {
  font-family: 'Karla';
  font-weight: 400;
  font-style: normal;
  src: ...;
}

@font-face {
  font-family: 'Karla-Bold';
  font-weight: 700;
  font-style: bold;
  src: ...;
}

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

Ответ 2

Я думаю, что в части url это должно быть /assets/..... вместо /font, если вы разместите их под активами, так как рельсы скомпилируют все в активы