如何为打印场景的表格样式添加自定义字体？配置后不生效如何解决？

现存问题 #

• @font-face 规则前多写了一个@，属于语法错误，浏览器无法识别该字体声明
• @font-face 是CSS全局规则，不能嵌套在table th, table td选择器内部，必须放在样式代码的最顶层
• @font-face 规则中不支持使用!important，该关键字仅能用于普通CSS属性值的声明
• 字体路径开头的~/是服务端模板或前端构建工具的别名，浏览器原生无法解析，会导致字体文件请求失败
• 未控制打印时机，字体是异步加载资源，代码中写完页面内容立刻执行打印，字体还未加载完成就会触发打印操作
• 表格字体声明没有加优先级，容易被浏览器默认的打印样式覆盖

修复后代码 #

function printDiv() {
    var divToPrint = document.querySelectorAll('.print-table');
    // 注意将下面的字体路径替换为你的站点实际可访问的绝对/相对路径，不要保留~前缀
    var htmlToPrint = '' +
        '<style type="text/css">' +
        '@font-face{font-family: Vazir;src: url("/dist/fonts/Vazir-Medium.ttf") format("truetype"); font-display: swap;}' +
        'table th, table td {' +
        'font-family: Vazir, sans-serif !important;' +
        'border:1px solid #000;' +
        'padding:0.5em;' +
        '}' +
        '</style>';

    divToPrint.forEach((item) => {
        htmlToPrint += item.outerHTML;
    })
    newWin = window.open("");

    newWin.document.write(htmlToPrint);
    // 等待页面资源加载完成后再执行打印，保证字体加载生效
    newWin.document.onload = function() {
        newWin.print();
        newWin.close();
    }
}

var elem = document.getElementById("intro");
elem.style.textAlign = "center";

额外验证项 #

• 直接在浏览器地址栏输入你调整后的字体完整路径，确认可以正常下载字体文件，避免跨域、路径拼写错误问题
• 部分浏览器打印设置中默认会禁用网页自定义字体，可在打印预览的更多设置中检查是否开启了「使用背景图形」或「保留自定义字体」相关选项

内容的提问来源于stack exchange，提问作者stoo frisat