Веб-шрифты Google и генерация PDF из HTML с помощью wkhtmltopdf

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

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

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

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

EDIT: объявление @font-face непосредственно в CSS тоже не работает.

8 51
html css wkhtmltopdf google-font-api

8 ответов:

конвертировать HTML в PDF by wkhtmltopdf старайтесь избегать woff шрифт. Используйте на Google Web Fonts С base64 кодировать.

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

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

Читать решение здесь.

43

простое решение: 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 как хорошо.

26

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

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

я смог найти этот шрифт на Шрифт Белка, но ваш пробег может варьироваться.

Я думаю, что происходит с шрифтами от Google, это то, что он пытается загрузить только тот формат, который, по его мнению, хочет этот браузер, который для WebKit является woff (я считаю). Но wkhtmltopdf не удается встроить шрифт woff PDF, и поэтому по умолчанию возвращается к sans-serif. Объявив все из них, включен шрифт TrueType, который фактически использует PDF.

кроме того, вам нужно определить шрифт, который вы хотите использовать в качестве первого в любом определении CSS семейства шрифтов, или wkhtmltopdf просто проигнорирует его.

13

Я только что проверил это с помощью @importнотация работает:

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

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

4

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

Я думаю, что это важно, что вы скачать и установить Open Sans Condensed ttf непосредственно из google и установить его. Также важно перезагрузить компьютер, чтобы разрешить доступ к другим службам после установки. Я загрузил ttf из font-squirrel первоначально и condensed был указан как "Open Sans" в windows / fonts, что неверно, если вы смотрите после установки 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');}
2

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

установите шрифт (ttf) на машине, на которой размещен веб-сервер, и просто требуйте его в css, как и с обычным шрифтом.

body{
    font-family: 'Lato';
}

теперь wkhtmltopdf должны быть в состоянии включить шрифт

2

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

--javascript-delay 1000

и текст шрифта Google начал появляться.

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

1

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

0