印刷時のフォントをCSSでカスタマイズ

いつもお世話になっております。

見積書を印刷するにあたり、フォントを統一(明朝体)にしたく、

印刷画面のカスタマイズ

などを参照してCSSをつくってみましたが、反映されません。

初心者なりに調べていますが、そもそも根本的に間違っている可能性が高く、とはいえ周囲にCSSがわかる人もおらず、ご教授いただけますと幸いです。

 

@media print {
   body {
     font-family:serif;
   }
}

F12での開発ツールのElementsで全体がbodyだったのでbodyで指定してみました。

よろしくお願いします。

佐野 智香様

お世話になっております.
トヨクモの江田と申します.

CSSセレクタには優先順位があります.
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

「body」ではなく「.contents-gaia」などで指定すれば反映されるかと思います.

江田様

お世話になっております、佐野です。

アドバイスいただきましたのに返事が遅くなりまして

大変失礼いたしました。ありがとうございます。

 

アドバイスいただきましたとおり行ってみましたが

私のやりかたが悪いようで反映されません。

@charset "UTF-8";
@media print {
 .contents-gaia {
  font-family: serif;
  font-size: 16px;
}

.control-value-content-gaia {
  font-size: 30px;
  color: blueviolet;
}
}

試しにF12を参考に印刷ページ内のある項目を色替えする指定もしてみましたが

うまくできません。

 

もしお気づきの点などございましたら

ご教授いただけますと幸いです。

よろしくお願いいたします。

 

江田様

お世話になっております、佐野です。

上記の件ですが、無事にフォント変更ができました!!!

 

原因として、最終的なPCでの印刷プレビューではなく

その手前のキントーンのプレビューでみていたからでした。

印刷プレビューで明朝体への変更を確認しました!!!

 

本当にありがとうございます!!!助かりました!!!

またなにかありましたら、ご鞭撻のほどよろしくお願いいたします。