添加样式表，但不添加样式
[英]Style Sheet getting added but not the style
问题描述
I am trying to add some styling to my print page(unfortunately i am a beginner so far so bear with me if i am doing something dumb). 
我正在尝试在打印页面上添加一些样式（不幸的是，到目前为止，我还是一个初学者，如果我在做一些愚蠢的事情，请多多包涵）。 Here is the style sheet 这是样式表
@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 ; }
and this is my print method. 这是我的打印方法。
$('#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(); });
Everything is seems to be working fine until i inspect my print page, there i can also see my style sheet getting added but when i go to the h1 tag, my style sheet doesn't appear and instead there is user agent stylesheet(added by browser as last resort when no style is present on stackoverflow ). 在我检查打印页面之前，一切似乎都工作正常，在那里我还可以看到添加了样式表，但是当我转到h1标签时，我的样式表没有出现，而是出现了用户代理样式表（由当stackoverflow上没有样式时，浏览器是最后的选择。
Finally i am adding this image just to consolidate what i am trying to convey. 最后，我添加此图像只是为了巩固我要传达的内容。
1 个解决方案
解决方案1
3 已采纳 2016-07-17 09:29:11
Two Three issues jump out: 两个三个问题跳出来：
In your style, you have
font-family: 'Cloister'.在您的样式中，您拥有font-family: 'Cloister'。 Those quotes shouldn't be there, it should just befont-family: Cloister.这些引号不应该存在，而应该是font-family: Cloister。You're outputting your
h1within yourheadelement.您将在head元素中输出h1。 (The browser is then relocating it for you.) It should be after the start ofbody.（然后浏览器为您重新定位。）应该在body开始之后。 I think you just have two of yourdocument.writelines reversed.我认为您只有两个document.write行颠倒了。As Darren Sweeney pointed out in a comment , you've identified the style sheet as being for print only (
media="print").正如Darren Sweeney在评论中指出的那样，您已将样式表标识为仅用于打印（ media="print"）。 When using dev tools, if you cancelled the print and inspected the window you opened without telling Chrome to show you the "print" media state, you're not going to see that style because it doesn't apply.使用开发工具时，如果取消打印并检查了打开的窗口而没有告诉Chrome向您显示“打印”媒体状态，则不会看到该样式，因为它不适用。
Here's how to tell Chrome to show you the "print" media state: 告诉Chrome浏览器显示“打印”媒体状态的方法如下：
Open devtools (right-click the
h1and choose Inspect, for instance)打开devtools（例如，右键单击h1并选择Inspect）From the devtools menu box on the upper right-hand side...
在右上方的devtools菜单框中... ...choose More Tools > Rendering Settings:
...选择更多工具>渲染设置： Tick the "Emulate media" checkbox and choose Print from the list:
勾选“模拟媒体”复选框，然后从列表中选择“打印”：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.