解決Chrome列印宋體不支援加粗效果
阿新 • • 發佈:2021-12-14
在emr病歷列印中(病歷頁面設定預設字型為宋體),使用window.print()進行前端網頁列印,會發現Chrome的網頁列印預覽中是不支援字型加粗效果的,雖然頁面效果上用font-weight是有效果的,但是就是那麼神奇,打印出來就不行(具體什麼原因還不知道)。
原頁面是這樣的
宋體列印情況下(粗體沒了)
好傢伙,出來的效果幾乎以假亂真,列印預覽效果如下:
打印出來的效果:
如果去掉預設的宋體字型(除了標題其他的都變成雅黑)
國家病歷列印要求中的字型統一為宋體的要求,沒辦法只能想辦法搞了。
然後做了一個頁面測試了下:嘗試了幾種不同宋體字型的效果和網友提供加陰影的方式,於是總結了兩個比較可靠的解決方案:
① 換用其他宋體字型(如華文宋體)<style media="print"> * { font-family: STSong; } </style>效果如下: 感覺可以解決問題,而且修改量比較少。
② 就是利用文字陰影,你沒看錯,文字陰影。
<style media="print"> .bold-shadow { text-shadow:0.15pt 0px 0px black,0.25pt 0px 0px black,0.35pt 0px 0px black,-0.25pt 0px 0px black,0px 0.25pt 0px black,0px -0.25pt 0px black; } </style> <script> function print() { $('.sde-grouptitle').addClass('bold-shadow'); // 給需要加粗的元素新增列印加粗class document.execCommand("print"); // 執行列印 } </script>
列印效果還是槓槓的,這種方式就是比較麻煩,需要改造程式碼。
大佬們還試過其他方式,在這裡也記錄下,或者小夥伴們有好的解決方案也歡迎留言。 ① 給Chrome設定自定義字型(說是有些機子可以但是有些機子無效,具體我也沒試過,感興趣的大夥自己試試。)