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
, если вы разместите их под активами, так как рельсы скомпилируют все в активы