Question

我正在尝试为我的打印页面添加一些样式（不幸的是，到目前为止，我是一个初学者，所以如果我正在做一些愚蠢的话，请耐心等待）。这是样式表

@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）。

最后，我添加此图片只是为了巩固我想传达的内容。

Answer 1

两个三个问题跳出来了：

按照您的风格，您有font-family: 'Cloister'。那些引号不应该在那里，它应该只是font-family: Cloister。
您在h1元素中输出了head。（然后浏览器会为您重新定位。）它应该在body开始之后。我想你只有两条document.write行被颠倒了。
在Darren Sweeney中指出a comment，您已将样式表标识为仅供打印（media="print"）。使用开发工具时，如果您取消了打印并检查了打开的窗口而没有告诉Chrome显示“打印”媒体状态，那么您将不会看到该样式，因为它不适用。
< / LI>
以下是告诉Chrome如何向您显示“打印”媒体状态：
1. 打开devtools（右键单击h1并选择Inspect，例如）
2. 从右上方的devtools菜单框中...
  
  ...选择更多工具＆gt;渲染设置：
3. 勾选“模拟媒体”复选框，然后从列表中选择打印：

样式表增加但不是样式

1 个答案: