私は印刷ページにスタイリングを追加しようとしています(残念ながら私は初心者です。ここでは、スタイルシート スタイルシートは追加されていますが、スタイルは追加されていません
@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タグに行くときは、私のスタイルシートのdoesn代わりにユーザーエージェントのスタイルシートがあります(スタイルが存在しない場合は最後の手段としてブラウザに追加されます)on stackoverflow)。
最後に、私が伝えようとしていることを整理するためにこの画像を追加しています。
'メディア=のprint':
ティックリストから印刷チェックボックス "メディアをエミュレート" を選択します
:その他のツール]> [レンダリング設定]を選択しますそれで、あなたが印刷するとき、あなたは正しいスタイリングを見ますか? –このイメージは印刷プレビュー検査要素のイメージです。プレビューをキャンセルして空白のページを調べました。 –
えええええええええええええええええええええええええええええええええええええええええん、 –