Google Web Fonts и создание PDF из HTML с помощью wkhtmltopdf
Я использую wkhtmltopdf для преобразования файлов HTML в формат PDF; он дает удивительно хорошие результаты, отображая PDF точно так же, как и WebKit.
Я использую веб-шрифты Google, чтобы предоставить пользователям возможность настраивать внешний вид редактируемого документа, предлагая им возможность выбирать между несколькими шрифтами. Он также отлично работает в браузере.
Проблема в том, что я не работаю со шрифтами Google, когда конвертирую такие HTML-файлы в PDF с помощью wkhtmltopdf. Я читал, что у других людей была такая же проблема.
Может ли кто-нибудь помочь мне исправить это?
РЕДАКТИРОВАТЬ: объявление @ font-face непосредственно в CSS тоже не работает.
10 ответов
Чтобы преобразовать HTML в PDF, wkhtmltopdf попытайся избежать woff шрифт лица. Использовать truetype формат Google Web Fonts с base64 закодировать.
Недавно я попытался использовать веб-шрифт Google из Google Web Fonts. В браузере он отображается правильно, но не отображается после преобразования HTML в PDF.
Наконец, после тщательного поиска в Интернете, я нашел инструменты для кодирования шрифтов в base64 формат, а также получил CSS для @font-face,
Прочитайте решение здесь.
Простое решение: Base64-кодирует ваш шрифт и встраивает его в CSS:
@font-face {
font-family: 'OpenSans';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
FontSquirrel может сделать это для вас с помощью расширенных опций их генератора Webfont; Google и другие шрифты могут быть закодированы с помощью этого инструмента.
Я использовал это решение с pdfkit а также wicked_pdf, которые работают через wkhtmltopdf, поэтому я предполагаю, что это должно работать с нативным wkhtmltopdf также.
У меня была такая же проблема, и я решил ее, загрузив шрифты и запустив ее из локального файла на моем веб-сервере с помощью этого объявления font-face:
@font-face {
font-family: 'PT Sans';
src: url( '/public/inc/fonts/PTS55F-webfont.eot');
src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Мне удалось найти этот шрифт на Font Squirrel, но ваш пробег может отличаться.
Я думаю, что происходит со шрифтами от Google, это то, что он пытается загрузить только тот формат, который, как он думает, хочет этот браузер, что для WebKit является woff (я полагаю). Но wkhtmltopdf не может встраивать шрифт woff в PDF, поэтому по умолчанию возвращается к sans-serif. Объявляя все из них, включается шрифт TrueType, который фактически использует PDF.
Кроме того, вам нужно определить шрифт, который вы хотите использовать в качестве первого в любом определении CSS семейства шрифтов, иначе wkhtmltopdf просто проигнорирует его.
Я только что проверил это с помощью @importнотация работает:
<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
Я использую django-wkhtmltopdf версии 2.0.3
Я боролся с этим уже около двух дней, мой совет вам, если ни один из приведенных выше ответов не работает для вас:
Установите шрифт (ttf) на компьютере, на котором размещен веб-сервер, и просто укажите его в css, как вы это делаете с обычным шрифтом.
body{
font-family: 'Lato';
}
Теперь wkhtmltopdf должен иметь возможность включать шрифт
Следующее работает для меня. Обратите внимание на включение расширенных наборов символов (если они вам нужны):
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
</style>
В моем случае мне просто нужно было добавить эту опцию
--javascript-delay 1000
и текст Google Font начал появляться.
[wkhtmltopdf 0.12.4 (с исправленным qt)]
Должно быть, я попробовал несколько вариантов, чтобы получить эту работу (из местных). Я пытаюсь вставить Open Sans Condensed в PDF через WKHtmlToPdf.
Я думаю, что важно, чтобы вы загрузили и установили Open Sans Condensed ttf прямо из Google и установили его. Также важно перезагрузить компьютер, чтобы разрешить доступ другим службам после установки. Я первоначально загрузил ttf из font-squirrel, и сжатый был указан как "Open Sans" в окнах / шрифтах, что неправильно, если вы посмотрите после установки Google, он указан как "Open Sans Condensed Light", так что даже Google local('Open Sans Cond Light') Сценарий неверен.
Как упоминалось ранее, вам нужно четко указывать растяжение и вес, так что вот что сработало для меня:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans');
}
@font-face {
font-family: 'Open Sans Condensed';
font-stretch:condensed;
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light');
}
@@font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
Использование @import было ключом к тому, чтобы Google Fonts работал с wkhtmltopdf, но затем у меня возникли проблемы с отсутствием символов CJK (китайский, японский и корейский). Решение состояло в том, чтобы переключиться на версию 2 Google Font API (https://fonts.googleapis.com/css2).
Ниже приведен фрагмент кода, который я вставил в свой HTML-код, чтобы получить поддержку всех языков, которые мне нужны, с помощью тестового PDF-файла. Помните о влиянии на производительность загрузки десятков удаленных шрифтов.
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans";
[lang="sq"] {font-family: 'Noto Sans', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic";
[lang="ar"] {font-family: 'Noto Sans Arabic', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali";
[lang="bn"] {font-family: 'Noto Sans Bengali', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian";
[lang="ka"] {font-family: 'Noto Sans Georgian', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati";
[lang="gu"] {font-family: 'Noto Sans Gujarati', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew";
[lang="he"] {font-family: 'Noto Sans Hebrew', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari";
[lang="hi"] {font-family: 'Noto Sans Devanagari', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan";
[lang="bo"] {font-family: 'Noto Serif Tibetan', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gurmukhi";
[lang="pa"] {font-family: 'Noto Sans Gurmukhi', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu";
[lang="ur"] {font-family: 'Noto Nastaliq Urdu', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Tai+Viet";
[lang="vi"] {font-family: 'Noto Sans Tai Viet', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC";
[lang="zh-hans"] {font-family: 'Noto Sans SC', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC";
[lang="zh-hant"] {font-family: 'Noto Sans TC', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP";
[lang="ja"] {font-family: 'Noto Sans JP', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR";
[lang="ko"] {font-family: 'Noto Sans KR', sans-serif !important;}
</style>
Убедитесь, что вы не указали, какой шрифт вы печатаете в таблице стилей печати.