添加样式表，但不添加样式

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标签时，我的样式表没有出现，而是出现了用户代理样式表（由当stackoverflow上没有样式时，浏览器是最后的选择。

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

Answer 1

两个三个问题跳出来：

在您的样式中，您拥有font-family: 'Cloister' 。 这些引号不应该存在，而应该是font-family: Cloister 。
您将在head元素中输出h1 。 （然后浏览器为您重新定位。）应该在body开始之后。 我认为您只有两个document.write行颠倒了。
正如Darren Sweeney在评论中指出的那样，您已将样式表标识为仅用于打印（ media="print" ）。 使用开发工具时，如果取消打印并检查了打开的窗口而没有告诉Chrome向您显示“打印”媒体状态，则不会看到该样式，因为它不适用。

告诉Chrome浏览器显示“打印”媒体状态的方法如下：

打开devtools（例如，右键单击h1并选择Inspect）
在右上方的devtools菜单框中...

...选择更多工具>渲染设置：
勾选“模拟媒体”复选框，然后从列表中选择“打印”：

添加样式表，但不添加样式

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-07-17 09:29:11

添加样式表，但不添加样式

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-07-17 09:29:11

解决方案1
3 已采纳 2016-07-17 09:29:11