2016-07-17 6 views
0

私は印刷ページにスタイリングを追加しようとしています(残念ながら私は初心者です。ここでは、スタイルシート スタイルシートは追加されていますが、スタイルは追加されていません

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

最後に、私が伝えようとしていることを整理するためにこの画像を追加しています。 enter image description here

+1

'メディア=のprint':

enter image description here

  • ティックリストから印刷チェックボックス "メディアをエミュレート" を選択します

    :その他のツール]> [レンダリング設定]を選択しますそれで、あなたが印刷するとき、あなたは正しいスタイリングを見ますか? –

  • +0

    このイメージは印刷プレビュー検査要素のイメージです。プレビューをキャンセルして空白のページを調べました。 –

    +0

    えええええええええええええええええええええええええええええええええええええええええん、 –

    答えて

    3

    3つの問題が出てジャンプ:あなたのスタイルで

    1. を、あなたはfont-family: 'Cloister'を持っています。それらの引用符はそこにあるべきではない、それはちょうどfont-family: Cloisterでなければならない。

    2. h1head要素内に出力しています。 (ブラウザはあなたのためにそれを再配置します。)それはbodyの開始の後でなければなりません。私はあなたの2つのあなたのdocument.write行を逆転させていると思います。

    3. a commentで指摘されているように、スタイルシートは印刷専用(media="print")と指定されています。開発ツールを使用しているときに、印刷をキャンセルして開いたウィンドウを調べて、「印刷」メディアの状態を表示するようにChromeに指示せずに表示した場合、そのスタイルは適用されないため表示されません。ここで

    は、あなたの「印刷」メディア状態を表示するChromeを伝える方法は次のとおりです。

    1. オープンデベロッパーツール(h1を右クリックして、例えば、点検選択)

    2. から右上のデベロッパーツール]メニューボックス...

      enter image description here

      ...あなたが設定した

      enter image description here

    +0

    おかげでクラウダー、私の最終的な私の愚かな間違い私は知っている..私は印刷プレビューを調べるべきであるとして私をガイドしてください、そこに私は私を見つけることができません:/ –

    +0

    @ ashfr:私はそれを行うための指示で答えを更新しました。私は一瞬でいくつかのスクリーンショットを追加します。 –

    +0

    ありがとうございました。もう一度質問しますが、初めて印刷プレビューをキャンセルして(スタイリングは問題ありません)、印刷ボタンをもう一度押すと、h1のスタイリングが消えます(スタイリングは消えています) –

    関連する問題