我正在尝试为我的打印页面添加一些样式(不幸的是，到目前为止我是一个初学者，所以如果我在做一些愚蠢的事情，请多多包涵)。这是样式表
@font-face {
font-family: 'Cloister';
src: url('../fonts/fonts/CloisterBlack.ttf');
font-weight: normal;
font-style: normal;
}
.navbar {
display: none;
}
.main-navigation{
display: none;
}
.hidden-print {
display: none;
}
.breadcrumb {
display: none;
}
.page-header {
display: none;
}
.footer {
display: none;
}
.main-container {
/*margin: 0 ;
padding: 0 !important;*/
}
.main-content .container{
min-height: auto;
border: none;
background: #0000ff;
}
@page {
margin: 1cm;
}
h1.page-title {
font-family: 'Cloister';
font-size: 40pt!important;
text-align: center ;
}这是我的打印方法。
$('#printButton').click( function () {
var divContents = $("#printPage").html();
//console.log(divContents);
var printWindow = window.open();
printWindow.document.write('<html>' +
'<head>' +
'<link rel="stylesheet" href="<?= base_url() ?>assets/css/print.css" type="text/css" media="print"/>'+
'<title>Student Report Card</title>');
printWindow.document.title = '';
printWindow.document.write('<h1 class="page-title"> BeaconHouse Potohar Campus</h1>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});在我检查我的打印页面之前，一切似乎都工作正常，在那里我也可以看到我的样式表被添加但是当我转到 h1 标签时，我的样式表没有出现，取而代之的是用户代理样式表(当没有样式时，由浏览器作为最后的手段添加 on stackoverflow )。
最后我添加这张图片只是为了巩固我想要传达的内容。
最佳答案
两个跳出三个问题:
在您的风格中，您有
font-family: 'Cloister'。那些引号不应该在那里，它应该只是font-family: Cloister。您在
head元素中输出h1。 (然后浏览器会为您重新定位它。)它应该在body开始之后。我认为您只是将两个document.write行颠倒了。作为Darren Sweeney在 a comment 中指出，您已将样式表标识为仅用于打印 (
media="print")。使用开发工具时，如果您取消打印并检查打开的窗口而没有告诉 Chrome 向您显示“打印”媒体状态，您将不会看到该样式，因为它不适用。
以下是让 Chrome 显示“打印”媒体状态的方法:
打开 devtools(例如，右键单击
h1并选择 Inspect)从右上角的开发工具菜单框...
...选择更多工具 > 渲染设置:
勾选“模拟媒体”复选框并从列表中选择“打印”:
关于javascript - 添加样式表但不添加样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38419758/