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

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

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

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

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

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

51
css google-font-api html wkhtmltopdf

8 ответов

конвертировать HTML в PDF по 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; 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 (я считаю). Но!--1--> не удается вставить шрифт 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 первоначально и конденсированный был указан как "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