Google Web Fonts и создание PDF из HTML с помощью wkhtmltopdf

Question

Я использую wkhtmltopdf для преобразования файлов HTML в формат PDF;он дает удивительно хорошие результаты, отображая PDF точно так же, как и WebKit.

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

Проблема в том, что у меня не работает Google Fonts при конвертации таких HTML-файлов в PDF с помощью wkhtmltopdf.Я читал, что у других людей была такая же проблема .

Может кто-нибудь помочь мне исправить это?

РЕДАКТИРОВАТЬ : объявление @ font-face непосредственно вCSS тоже не работает.

Answer 1

Чтобы конвертировать HTML в PDF с помощью wkhtmltopdf, старайтесь избегать woff шрифта. Используйте truetype формат Google Web Fonts с кодированием base64.

Недавно я попытался использовать веб-шрифт Google из Google Web Fonts. В браузере он отображается правильно, но не отображается после преобразования HTML в PDF.

После тщательного поиска в Интернете, я наконец нашел инструменты для кодирования шрифтов в формате base64, а также получил CSS для @font-face.

Прочитайте решение здесь .

Answer 2

Простое решение: Base64-кодирует ваш шрифт и встраивает его в CSS:

@font-face {
    font-family: 'OpenSans';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

FontSquirrel может сделать это за вас с помощью расширенных опций их Webfont Generator ; Google и другие шрифты могут быть закодированы с помощью этого инструмента .

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

Answer 3

У меня была такая же проблема, и я решил ее, загрузив шрифты и запустив ее из локального файла на моем веб-сервере с помощью этого объявления шрифта:

@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.просто проигнорирую это.

Answer 4

Я только что проверил, что с использованием записи @import работает:

<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>

Я использую django-wkhtmltopdf версии 2.0.3

Answer 5

В моем случае мне просто нужно было добавить эту опцию

--javascript-delay 1000

и Google Font text начал отображаться.

[wkhtmltopdf 0.12.4 (с исправленным qt)]

Answer 6

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

Установите шрифт (ttf) на компьютере, на котором размещен веб-сервер, и просто укажите его в CSS, как вы это делаете с обычным шрифтом.

body{
    font-family: 'Lato';
}

Теперь wkhtmltopdf должен иметь возможность включить шрифт

Answer 7

Я, должно быть, попробовал несколько вариантов, чтобы получить эту работу (из местного).Я пытаюсь встроить Open Sans Condensed в pdf через WKHtmlToPdf.

Я думаю, важно загрузить и установить Open Sans Condensed ttf прямо из Google и установить его.Также важно перезагрузить компьютер, чтобы разрешить доступ другим службам после установки.Я загрузил ttf из font-squirrel первоначально, и сжатый был указан как «Open Sans» в окнах / шрифтах, что неправильно, если вы посмотрите после установки Google, он будет указан как «Open Sans Condensed Light», так что даже в Google 100 *Сценарий неверен.

Как уже упоминалось ранее, вам нужно явно указывать растяжки и веса, так что вот что сработало для меня:

    @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');}

Answer 8

Убедитесь, что вы не указали, каким шрифтом вы печатаете, в таблице стилей печати. ​​