Штрих-код шрифта внутри HTML-тега таблицы отображается неправильно.Но вне работы отлично

Question

Штрих-код в теге table * отображается неправильно, как показано на рисунке и изображении ниже

<table id="BranchReturnReportDataTable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th colspan="6" id="docBarcode" style="text-align:center" class="barcode">*8851234567890*</th>
        </tr>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
            <th>Column E</th>
            <th>Column F</th>
        </tr>
    </thead>
    <tbody id="BranchReturnReportDataTableBody"></tbody>
</table>

Рендеринг штрих-кода:

Но когда я использую его вне стола, он работает как заклинание.

<p id="docBarcode" class="box-title barcode" style="text-align:center">*8851234567890*</p>

Оба кода используют один и тот же css код

@font-face {
  font-family: 'C39HrP72DlTt';
  src: url('V100018.TTF');
}

.barcode {
    font-family: 'C39HrP72DlTt';
    font-size: 6em;
    /*padding: 10px;*/
}

Answer 1

Стиль браузера по умолчанию для заголовка таблицы, кажется, устанавливает font-weight на bold, из-за чего он не отображается правильно.Чтобы это исправить, измените свой CSS на

.barcode {
  font-family:'C39HrP72DlTt';
  font-size: 6em;
  font-weight: normal;
  /*padding: 10px;*/
}