要覆盖默认浏览器的打印设置，你可以使用 CSS 和 JavaScript 来实现对打印样式的自定义。通常，浏览器会根据页面的内容和布局自动决定打印效果，但是你可以通过以下方法来控制打印样式、布局、颜色等。

1. 使用 @media print 媒体查询来定义打印样式

在 CSS 中，你可以使用 @media print 媒体查询来设置打印时的样式。这些样式仅会在打印时应用，可以帮助你控制页面如何在打印中显示。

示例：

/* 打印时样式 */
@media print {
    body {
        font-size: 12pt; /* 设置打印字体大小 */
        line-height: 1.5;
    }

    .no-print {
        display: none; /* 隐藏不需要打印的元素 */
    }

    .print-header {
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 16pt;
    }

    /* 让页面内容全宽 */
    .content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 打印时隐藏背景 */
    body {
        background: white;
    }
}

解释：

• @media print 中的样式仅在打印时应用。
• .no-print 类被设置为 display: none;，以便在打印时隐藏某些元素（例如广告或不需要打印的导航条）。
• 你可以调整字体大小、颜色、页边距等，确保页面在打印时符合需求。

---

2. 通过 window.print() 在 JavaScript 中触发打印

JavaScript 允许你在用户触发特定操作时调用打印功能。你可以使用 window.print() 方法打开打印对话框，然后触发浏览器的打印行为。

示例：

function triggerPrint() {
    window.print(); // 打开打印对话框
}

在 HTML 中添加一个按钮来触发打印：

<button onclick="triggerPrint()">打印页面</button>

解释：

• 当点击按钮时，triggerPrint() 函数会调用 window.print()，这会打开浏览器的打印对话框，允许用户选择打印机、页面方向等。

---

3. 使用 JavaScript 修改打印样式

如果需要动态修改打印样式或做更多定制，你可以在调用 window.print() 之前通过 JavaScript 更改页面样式。例如，隐藏某些元素、修改页面布局或改变颜色。

示例：在打印之前调整页面样式

function customizePrint() {
    // 隐藏某些元素
    document.querySelector('.header').style.display = 'none';

    // 修改页面字体
    document.body.style.fontSize = '14pt';

    // 触发打印
    window.print();

    // 打印结束后恢复原样
    document.querySelector('.header').style.display = 'block';
    document.body.style.fontSize = ''; // 恢复默认字体大小
}

在 HTML 中使用这个功能：

<button onclick="customizePrint()">打印并自定义</button>

解释：

• customizePrint() 函数可以在打印前修改页面元素的样式。例如，隐藏不需要打印的 .header 元素，或者调整字体大小。
• 调用 window.print() 打开打印对话框。
• 打印完成后，恢复页面的默认样式。

---

4. 覆盖默认的打印设置（例如页面大小、边距等）

一些浏览器允许你调整打印页面的设置，例如纸张大小、边距、页眉和页脚等。你可以在 CSS 中定义某些设置，但浏览器的打印对话框仍然允许用户自定义设置（例如打印页面的页边距）。你可以通过以下方式来尽量控制这些设置：

示例：设置打印的页边距和页面大小

@media print {
    /* 设置页面的边距 */
    @page {
        margin: 1in; /* 设置边距为 1 英寸 */
    }

    /* 修改页面内容的布局 */
    .content {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* 可选：设置页面方向（横向或纵向） */
    @page {
        size: A4 landscape; /* 设置 A4 纸张横向打印 */
    }
}

解释：

• 使用 @page 来设置打印页面的边距、大小和方向。
• size: A4 landscape; 设置纸张为 A4 大小并使用横向打印。
• margin: 1in; 设置页面的边距为 1 英寸，通常会影响打印时的页边距。

---

5. 隐藏浏览器默认的页眉和页脚

大多数浏览器会在打印页面时自动添加页眉和页脚（例如页面号码、日期等）。如果你不想显示这些信息，可以尝试通过 CSS 覆盖一些默认的打印设置，尽管这并不总是有效，取决于浏览器的实现。

示例：

@media print {
    /* 隐藏页眉和页脚 */
    header, footer {
        display: none;
    }
}

解释：

• header 和 footer 在打印时被设置为 display: none;，从而隐藏它们。
• 但需要注意，不同浏览器的行为可能不同，部分浏览器可能不会完全隐藏默认的页眉和页脚。

---

总结：

要覆盖默认的浏览器打印设置，主要通过 CSS 媒体查询 @media print 来调整打印时的布局、字体、颜色等样式。你还可以使用 JavaScript 来在打印前动态修改样式，或直接调用 window.print() 来触发打印对话框。

• CSS 可以用来控制页面的布局、字体、隐藏元素、调整边距等。
• JavaScript 可以动态调整页面样式，并在打印时控制哪些内容被打印、如何打印。
• 尽量使用 @media print 结合 @page 来设置页面尺寸和边距，确保打印效果符合要求。

这些方法可以帮助你实现高度自定义的打印布局，确保内容按照你的需求进行打印。