如何在Angular 4及Angular中修改弹窗字体（含打印弹窗.inner类）

安全阿岳

2026-5-19

如何修改Angular 4弹窗（打印窗口）中.inner类的字体

针对你提到的打印弹窗场景，我给你两种实用的实现方案，都是基于你在component.ts中操作弹窗的情况：

方案1：创建弹窗时直接注入自定义样式

如果你的打印弹窗是通过window.open创建的独立窗口，可以在写入打印内容时直接插入样式规则，精准控制.inner类的字体：

// 你的component.ts中打开打印窗口的代码示例
openPrintWindow() {
  const printWindow = window.open('', '_blank', 'width=800,height=600');
  
  // 写入打印页面的HTML结构，包含自定义样式
  printWindow.document.write(`
    <html>
      <head>
        <title>打印预览</title>
        <style>
          .inner {
            font-family: 'Arial', sans-serif; /* 替换为你需要的字体 */
            font-size: 14px;
            color: #333;
            line-height: 1.6;
          }
        </style>
      </head>
      <body>
        <!-- 这里替换成你的实际打印内容 -->
        <div class="inner">需要打印的文本内容...</div>
      </body>
    </html>
  `);
  
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
}

这种方式的优势是样式完全独立，不会干扰主应用的样式，非常适合独立打印窗口的场景。

方案2：穿透Angular样式隔离（适用于组件式弹窗）

如果你的打印弹窗是Angular组件（比如Angular Material的MatDialog），可以利用::ng-deep穿透Angular的样式隔离机制，在组件专属样式文件中修改.inner类：

/* 弹窗组件的xxx.component.css文件 */
/* 给弹窗根元素加专属类，避免全局样式污染 */
.my-print-dialog ::ng-deep .inner {
  font-family: 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 400;
}

然后在弹窗组件的模板中，给根容器加上my-print-dialog类：

<!-- 弹窗组件模板 -->
<div class="my-print-dialog">
  <div class="inner">打印内容...</div>
</div>

额外小提示

如果使用自定义字体，要确保字体文件已正确引入到项目中，并且在样式中通过@font-face声明；
测试打印样式时，优先用浏览器的「打印预览」功能，避免频繁打印浪费纸张。

内容的提问来源于stack exchange，提问作者fariba.j

如何在Angular 4及Angular中修改弹窗字体（含打印弹窗.inner类）

方案1：创建弹窗时直接注入自定义样式 #

方案2：穿透Angular样式隔离（适用于组件式弹窗） #

额外小提示 #

方案1：创建弹窗时直接注入自定义样式

方案2：穿透Angular样式隔离（适用于组件式弹窗）

额外小提示