window.print()收银小票打印文本质量异常问题求助

针对你开发收银软件时遇到的小票打印文本质量异常问题，给出以下可行解决方案：

1. 更换为热敏打印机友好的点阵字体 #

热敏小票打印机对系统内置的点阵字体支持远优于矢量字体（如你当前使用的Arial），矢量字体在低分辨率打印机上会被光栅化，导致像素化或白点。建议替换为Courier New（系统自带）或专门的小票字体（如OCR-B）。

修改样式中的font-family：

font-family: "Courier New", monospace !important;

2. 禁用浏览器字体平滑 #

浏览器默认的文本抗锯齿在低分辨率小票打印机上会产生模糊或白点，强制关闭字体平滑：

-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;

3. 强制纯黑文本与精确颜色渲染 #

确保文本为纯黑色，避免浏览器渲染灰度文本，同时开启打印颜色精确匹配：

color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;

4. 优化打印页面设置 #

添加@page规则匹配小票纸张尺寸，避免浏览器自动缩放：

@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }
}

5. 简化布局，避免Bootstrap Flex潜在问题 #

Bootstrap的Flex布局在打印时可能触发额外渲染计算，建议换成传统块级布局或表格排版小票内容，减少渲染变形。比如将商品列表用<table>代替Flex容器，保证文本对齐和渲染稳定。

修改后的完整样式示例 #

.uctenkaTisk {
    visibility: visible !important;
    width: 80mm !important;
}
.uctenkaTisk span {
    font-family: "Courier New", monospace !important;
    font-size: 3.2mm !important;
    font-weight: bold !important;
    color: #000 !important;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}
.uctenkaInfoText{
    font-family: "Courier New", monospace !important;
    font-size: 3mm !important;
    font-weight: bold !important;
    color: #000 !important;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }
    body * {
        visibility: hidden;
    }
    .uctenkaTisk, .uctenkaTisk * {
        visibility: visible;
    }
    .uctenkaTisk {
        width: 80mm !important;
        height: auto !important;
    }
    .uctenkaTisk span {
        font-family: "Courier New", monospace !important;
        font-size: 3.2mm !important;
        font-weight: bold !important;
        color: #000 !important;
        -webkit-font-smoothing: none;
        -moz-osx-font-smoothing: grayscale;
        font-smooth: never;
    }
    .uctenkaInfoText{
        font-family: "Courier New", monospace !important;
        font-size: 3mm !important;
        font-weight: bold !important;
        color: #000 !important;
        -webkit-font-smoothing: none;
        -moz-osx-font-smoothing: grayscale;
        font-smooth: never;
    }
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

额外建议 #

• 测试时直接打印，不要依赖浏览器预览（预览会压缩渲染质量）
• 确保打印机驱动为最新版本
• 如果以上方案仍无效，可考虑直接使用ESC/POS指令打印（绕过浏览器HTML渲染），需PHP对接打印机指令的库支持

内容的提问来源于stack exchange，提问作者Dominik Buranský