css - HTML 表格标记内的条形码字体无法正确呈现。但外面工作完美

Question

table thead 标签中的条形码呈现不正确，代码和图像如下所示

<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>

条码渲染显示是这样的

但是当我在 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;*/
}