Phantom JS плохо кернингует пользовательские шрифты на lambda

#css #node.js #lambda #phantomjs #fontconfig

#css #node.js #лямбда #phantomjs #fontconfig

Вопрос:

Я запускаю html-pdf для генерации PDF через nodejs с использованием PhantomJS и запускаю его на aws lambda. У меня есть пользовательские шрифты, и ссылка на них с помощью path в css (src: url('path/fonts.ttf'); приводила к тому, что pdf отображался как одно большое изображение, а размер файла был в 10 раз больше оригинала.

итак, я изменил его, чтобы ссылаться на шрифты локально, чтобы исправить проблему с изменением размера файла qt_qpa_fontdir и home переменной в моем локальном каталоге шрифтов, и это работает. шрифты теперь отображаются, а размер файла возвращается к нормальному. Однако в шрифтах неверный интервал между буквами / кернинг.

это также было проблемой, когда я ссылался на шрифты через path, но я исправил это с помощью файла fonts.conf в папке shared fonts, используя xml:

 <?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font">
  <edit mode="assign" name="rgba">
   <const>rgb</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintslight</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="lcdfilter">
   <const>lcddefault</const>
  </edit>
 </match>
</fontconfig>
  

Это исправление не помогает теперь, когда ссылки на шрифты выполняются локально. Должен ли я также указывать путь к файлу конфигурации QT fonts? или измените файл fonts.conf?

введите описание изображения здесь введите описание изображения здесь

Ответ №1:

Вот над чем я только что начал работать с пользовательскими шрифтами на AWS Lambda для htmltopdf.

Я создал каталог шрифтов в корневом каталоге шрифтов моего проекта и поместил туда все мои шрифты. Также в этом каталоге я создал файл fonts.conf, который выглядит следующим образом:

     <?xml version="1.0"?>
    <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
    <fontconfig>
      <dir>/var/task/fonts/</dir>
      <cachedir>/tmp/fonts-cache/</cachedir>
      <config></config>
    </fontconfig>
  

А затем в моем (node.js на основе функции обработчика я установил переменную ENV, чтобы указать fontconfig, где найти шрифты.

process.env.FONTCONFIG_PATH='/var/task/fonts' — если это не работает, измените path на '/var/task'

После этого я могу ссылаться на шрифт, например Bitter, в моем шаблоне по имени (просто Bitter).

Я понял это, основываясь на советах в этом проекте по настройке RSVG для работы с пользовательскими шрифтами на Lambda: https://github.com/claudiajs/rsvg-convert-aws-lambda-binary/blob/master/README.md#using-custom-fonts

ПРИМЕЧАНИЕ: Если вы столкнетесь с какой-либо проблемой при замене букв в сгенерированном pdf-файле, измените существующий файл fonts.conf на приведенный ниже

     <fontconfig>
        <dir>/var/task/fonts/</dir>
        <cachedir>/tmp/fonts-cache/</cachedir>
         <!--
         Load local system customization file
        <include ignore_missing="no">conf.d</include> -->
        <match target="font">
            <edit mode="assign" name="rgba">
                <const>rgb</const>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="hinting">
                <bool>true</bool>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="hintstyle">
                <const>hintslight</const>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="antialias">
                <bool>true</bool>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="lcdfilter">
                <const>lcddefault</const>
            </edit>
        </match>    
        <config></config>
    </fontconfig>