Я генерирую pdf файл в django, здесь я использую @font-face для USPSIPStandard только для одного тега <p>, но это влияет на весь pdf

Я генерирую pdf отчеты для пациента с помощью wkhtmltopdf в Django, и мне нужно отобразить imb_code пациента в семействе шрифтов USPSIPStandard, я использую его файл в папке Static, когда использую этот @font-face в моем html файле, это влияет на стилизацию тега <pre>, (не текст отображается в формате USPS, а только стиль меняется), но я не использую этот шрифт в этом теге pre, 

<style>
        @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url("{{ usps_font }}") format('truetype');
        }

        /* Apply only to specific class */
        .usps-barcode {
            font-family: 'USPS_IMB_Standard', sans-serif;
        }
    </style>

// Here is pre tag
<pre style="padding: 10px 5px; font-size: 12px">
  {{statement.statement_data}}</pre>

// Here using this font family: 
<div>
        <p class="usps-barcode" style="font-size: 14px; margin: 5px 5px 0px; padding: 0px; margin-left: 1px;">
            {{ patient.imb_encode }}
        </p>
    </div>

но когда я удаляю это :

 @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url("{{ usps_font }}") format('truetype');
        }

он показывает содержимое тега pre в правильном формате, почему font-face влияет на тег pre, хотя я не применяю его к тегу pre, так как я также определяю по умолчанию body и * font-family

  1. Заставьте <pre> использовать определенный шрифт, добавьте это в свой CSS, чтобы убедиться, что <pre> сохраняет свой предполагаемый стиль:

    pre {
 font-family: 'Courier New', Courier, monospace !important;
}

Параметр !important гарантирует, что никакие другие стили не переопределят его.

  1. Определите шрифт по умолчанию для всего остального

     body, * {
    font-family: Arial, sans-serif;
 }

Это помогает предотвратить нежелательные изменения шрифта.

  1. Используйте шрифт USPS только для .usps-barcode

       @font-face {
      font-family: 'USPS_IMB_Standard';
      src: url("{{ usps_font }}") format('truetype');
   }

  .usps-barcode {
       font-family: 'USPS_IMB_Standard', sans-serif;
   }

Это гарантирует, что шрифт USPS будет использоваться только там, где это необходимо.

  1. Попробуйте добавить мета-тег для лучшей обработки

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

Это может помочь wkhtmltopdf более последовательно обрабатывать шрифты.

Чтобы шрифт работал должным образом, он должен быть установлен в локальной системе, как показано в примере (который частично неисправен). Таким образом, здесь мы видим, что он работает в "предварительном просмотре" проводника вверху справа, но не в активном браузере!

enter image description here

В чем разница, даже при всех недостатках сэмплов? enter image description here

Это был стиль, который я использовал.

<style type="text/css">
 @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url(USPSIMBStandard.ttf) format('truetype');
        }
    p.uspsBarCode {font-family: USPSIMBStandard, USPS_IMB_Standard; font-size:14pt}
</style>
</head>

<body>
<p>Test rendering of USPSIMBStandard.ttf font.</p>

<ol>
<li>
<p>
FFTTDAADTTADTFDDFDDTFAFATDTDDFDAFDADDADDAFAAAFTTFTFDTFAAADADDDFDF</p>
</li>
<li>
<p class="uspsBarCode">
FFTTDAADTTADTFDDFDDTFAFATDTDDFDAFDADDADDAFAAAFTTFTFDTFAAADADDDFDF</p>
</li>

С и без <pre>

enter image description here

<style type="text/css">
 @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url(USPSIMBStandard.ttf) format('truetype');
        }
  p.uspsBarCode {font-family: USPSIMBStandard, USPS_IMB_Standard; font-size:14pt;}
  pre.me {padding: 10px 5px; font-size: 20px;}
</style>
<body>
Using PRE</br>
  <pre class="me">
  FFTTDAADTTADTFDDFDDT
  </pre>

Here using this font family without pre: 
  <div>
    <p class="uspsBarCode">
    FFTTDAADTTADTFDDFDDTF
    </p>
  </div>
</body>

enter image description here

enter image description here

Здесь вы можете увидеть разницу в содержании тегов с USPS и без него

Вернуться на верх