Style Sheet getting added but not the style
Question
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 ).
Finally i am adding this image just to consolidate what i am trying to convey.
1 answers
solution1
3 ACCPTED 2016-07-17 09:29:11
Two Three issues jump out:
In your style, you have
font-family: 'Cloister'. Those quotes shouldn't be there, it should just befont-family: Cloister.You're outputting your
h1within yourheadelement. (The browser is then relocating it for you.) It should be after the start ofbody. I think you just have two of yourdocument.writelines reversed.As Darren Sweeney pointed out in a comment , you've identified the style sheet as being for print only (
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.
Here's how to tell Chrome to show you the "print" media state:
Open devtools (right-click the
h1and choose Inspect, for instance)From the devtools menu box on the upper right-hand side...
...choose More Tools > Rendering Settings:
Tick the "Emulate media" checkbox and choose Print from the list:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.