Использовать пользовательские шрифты с помощью wkhtmltopdf

Я пытаюсь использовать пользовательские шрифты в моем PDF файле, созданный с помощью wkhtmltopdf. Я читал, что вы не можете использовать веб-сайты google, и что wkhtmltopdf использует файл .TTTT файла. Может ли кто-нибудь подтвердить это? Поэтому я загрузил файл .ttf из веб-сайта google и вставил его на свой сервер, а затем использовал шрифт:

    @font-face {
        font-family: Jolly;
        src: url('../fonts/JollyLodger-Regular.ttf') format('truetype');
    }

и семейство шрифтов:

    <style type = "text/css">
        p { font-family: 'Jolly', cursive; }
    </style>

И теперь текст, который должен отображаться с помощью шрифта Jolly Lodger, вообще не отображается, страница пуста.

Что я делаю неправильно?

PS: Я пытался использовать разные файлы .ttf.

Ответы

Ответ 1

Поскольку это шрифт Google Web, вам не нужно писать @font-face в вашей таблице стилей, просто используйте следующий тег ссылки в исходном коде:

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

и

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

будет работать.

Кстати, в вашем коде вы определяете @font-face family как font-family: Jolly; и используете его как p { font-family: 'Jolly Lodger', cursive; }, это неправильно, потому что оно не соответствует имени семейства шрифтов.

Ответ 2

Я уверен, вы вызываете wkhtmltopdf из веб-обертки с помощью IIS. Вот почему некоторые люди говорят, что они работают для них. Вероятно, они вызывают wkhtmltopdf из командной строки, и в этом случае он может разрешать относительные ссылки в URL-адресе CSS(), но если вы вызываете его из мгновенного или подобного, вы можете обойти проблему, указав URL-адрес, например say URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf') вместо этого.

Неспособность правильно разрешить относительные ссылки в тегах CSS URL(), по-видимому, нарушена в wkhtmltopdf 0.11.0_rc1, но некоторые более ранние версии могут работать нормально. Такая же проблема возникает и с другими тегами URL-адреса CSS(), например, при вызове фоновых изображений - нарушение расположения файла нарушено. Интересно, однако, что в случае изображений, если вы используете <IMG SRC=>, 0.11.0_rc1 может найти файл, даже если предоставлен относительный путь. Проблема, по-видимому, ограничена тегами URL() внутри CSS.

РЕДАКТИРОВАТЬ: Я узнал, что если вы используете file:/// со всеми строками вперед в пути, то он работает. Другими словами, URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf') должен работать.

Ответ 3

Как указано выше Yardboy, мы обнаружили, что base64 кодирует шрифт TrueType в нашей CSS работает хорошо. Но я хотел поделиться некоторым дополнительным пониманием.

Мы используем 4 пользовательских шрифта с уникальным именем 'Light' 'Medium' и т.д.

Я использую инструментарий openssl для кодировки base64 с хорошими результатами. Но вы также можете использовать fontsquirrel. Просто не забудьте удалить все другие типы шрифтов ('woff' 'otf'..). Мы обнаружили, что использование truetype исключительно загадочно работало.

Кодировать файл, обрезать вывод и добавлять в буфер обмена

openssl base64 -in bold.ttf | tr -d '\n' | pbcopy

В Windows вы должны установить openssl и добавить его в путь, затем

openssl base64 -in bold.ttf | tr -d '\n' | clip

или просто используйте этот вид веб-сайтов

Добавить в свойство css font src

   @font-face {
      font-family: 'Bold';
      font-style: normal;
      font-weight: normal;
      src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
    }

Представленный вывод будет зависеть от вашей версии wkhtmltopdf и вкуса. Поскольку наши серверы запускают Debian и я разрабатываю на OSX, я тестировал на виртуальной машине локально.

Ответ 4

Если у вас есть файл .ttf или .woff, используйте следующий синтаксис

@font-face {
   font-family: 'Sample Name';
   src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
   }

не используйте ttf, который больше не будет работать с полным именем 'truetype', и если у вас есть .woff, используйте 'woff' в формате. Для моего дела это сработало.

Однако наилучшей практикой является использование ссылок на API шрифтов Google, что лучше всего, если вы не получите того, что соответствует вашим критериям, а затем используйте эту технику, которая будет работать

Ответ 5

Я просто добавлю свой ответ здесь, если кому-то это понадобится.

Я использовал Rotativa, который основывается на wkhtmltopdf, и в результате я использовал следующее:

@font-face {
    font-family: "testfont";
    src: url("/UI/Fonts/609beecf-8d23-4a8c-bbf5-d22ee8db2fc9.woff") format("woff"),
         url("/UI/Fonts/1cd9ef2f-b358-4d39-8628-6481d9e1c8ce.svg#1cd9ef2f-b358-4d39-8628-6481d9e1c8ce") format("svg");
}

... и кажется, что Rotativa подбирает версию SVG. Если я их переупорядочу, он все равно работает, но если я удалю SVG-версию, она перестанет работать.

Возможно, стоит сделать снимок. Невозможно найти хорошую документацию о том, почему это так, однако

Ответ 7

После выполнения всех обходных решений (некоторые из которых действительно сработали) я столкнулся с более простым решением:

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

Вы можете просто использовать обозначение @import для включения шрифта.

Ответ 8

Я лично должен был установить семейство шрифтов в div (я изначально хотел span)

<style>
@font-face {
    font-family: 'CenturyGothic';
    src: url("fonts/century-gothic.ttf") format('truetype');
}

.title {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 22pt;
}
</style>

...

<div class="title">This is Century Gothic</div>

Ответ 9

используя @import без загрузки шрифта, вам нужно добавить файл .ttf в проект