打印预览中未显示文本答案

【问题标题】：Text not showing in print preview打印预览中未显示文本
【发布时间】：2020-03-07 17:36:08
【问题描述】：

我会尝试打印我的网页，但在打印预览中，它没有显示任何文字

尝试添加媒体打印样式，但仍然没有

我的 HTML 代码

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
	body, h1, h2, h3, h4, h5, h6{
		font-family: 'Bree Serif', serif;
	}
	</style>
	  <style type="text/css">
  @media print and (color){
    body {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }

  }

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Nota</title>
	<link rel="stylesheet" href="bootstrap2.css">
</head>
<body onload="window.print()">
	<div class="container">
		<div class="row">
			<div class="col-xs-6">
			  <h1>
			    <a href="https://riyadhaqiqah.com/">
			   <img src="riyadh.png">
			    </a>
			  </h1>
			</div>
			<div class="col-xs-6 text-right">
			  <h1>INVOICE</h1>
			  <h1><small>NOTA : PBSAN1908381</small></h1>
			</div>
		</div>

		  <div class="row">
		    <div class="col-xs-5">
		      <div class="panel panel-default">
		              <div class="panel-heading">
		                <h4>From: <a href="#">Riyadh Aqiqah</a></h4>
		              </div>
		              <div class="panel-body">
		                <p>
		                  Komplek, Jl. Mawar Raya Jl. Raya Harapan Kita No.27A<br>
		                  Bencongan, Kec. Karawaci <br>
		                  Tangerang, Banten 15810 <br>
		                  0821-5199-9910 <br>
		                </p>
		              </div>
		            </div>
		    </div>
		    <div class="col-xs-5 col-xs-offset-2 text-right">
		      <div class="panel panel-default">
		              <div class="panel-heading">
		                <h4>To : <a href="#"> Agus Mina</a></h4>
		              </div>
		              <div class="panel-body">
		                <p>
		                  Kp. Kudang Rt/Rw 04/09, <br>
		                  Ds. Cibiru Wetang Kec. Cileunyi - Bandung (Warung Amel, sebelah isi ulang air Novita) <br>
		                  <a href="">0852-1342-6441</a> <br>
		                </p>
		              </div>
		            </div>
		    </div>
		  </div> <!-- / end client details section -->

		         <table class="table table-bordered">
        <thead>
          <tr>
            <th><h4>NO</h4></th>
            <th><h4>URAIAN</h4></th>
            <th><h4>HARGA SATUAN</h4></th>
            <th><h4>QTY</h4></th>
            <th><h4>JUMLAH</h4></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Tipe A Betina + Masak</td>
            <td class="text-right"><span style="float: left;">Rp </span>1,100,000</td>
             <td class="text-right">1</td>
              <td class="text-right"><span style="float: left;">Rp </span>1,100,000</td>
          </tr>
        </tbody>
      </table>

		<div class="row text-right">
			<div class="col-xs-2 col-xs-offset-8">
				<p>
					<strong>
						Diskon     : <br>
						Uang Muka  : <br>
						Kekurangan : <br>
						Total      : <br>
					</strong>
				</p>
			</div>
			<div class="col-xs-2">
				<strong>
					<span style="float: left;">Rp </span>0 <br>
					<span style="float: left;">Rp </span>1,650,000 <br>
					<span style="float: left;">Rp </span>0 <br>
					<span style="float: left;">Rp </span>1,650,000 <br>
				</strong>
			</div>
		</div>

		<div class="row">
		  <div class="col-xs-5">
		    <div class="panel panel-info">
			  <div class="panel-heading">
			    <h4>Paypal details</h4>
			  </div>
			  <div class="panel-body">
			    <p>tahirtaous@live.com</p>
			   <!--  <p>Bank Name</p>
			    <p>SWIFT : --------</p>
			    <p>Account Number : --------</p>
			    <p>IBAN : --------</p> -->
			  </div>
			</div>
		  </div>
		</div>
	</div>
</body>
</html>

这是我的小提琴，小提琴出现的文字很奇怪。如果有人可以解释并帮助我。我真的不知道为什么会这样。

https://jsfiddle.net/anggi404/2L4pcsa7/1/

【问题讨论】：

我试过你的 jsfiddle，打印预览效果很好
这很奇怪，小提琴打印预览效果很好。但在我的本地项目中，它没有显示任何文本。
它适用于我：Mac/Firefox/打印到 PDF。我想知道是浏览器问题还是打印驱动问题。
是的，我猜是浏览器问题，因为尝试使用 firefox 可以正常工作。谢谢大家回答我的问题:)
工作正常可能是你的浏览器没有更新..

标签： html css twitter-bootstrap

【解决方案1】：

注意到这是一个老问题，但它可能会对那里的人有所帮助。这可能与您自定义加载的字体有关。

如果打印的字体不太重要，请尝试添加类似的内容。

在下面的示例中，我只针对身体，但当然可以随意更改它。

@media print {
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
}

当然有一种方法可以在打印中加载自定义字体，但这可能会帮助某人继续前进。

祝你好运！

【讨论】：