pageres, phantomJS capture sreenshot chinese fonts not render correctly

問題

前幾天在mac上用pageres做網站截圖都很正常,搬上ec2上的ubuntu之後,發現截圖的中文字都是一格一格的... Chinese fonts weird blocks google一下發現不少人遇到過,深入探究後發現是phantomJS在ubuntu上沒有中文font的問題...

奮戰過程

我先看了github的那篇issue,但沒說到如何安裝font,接著我又找到了第二個連結

先嘗試了第二篇的方法,從文章中第一個option試到把我mac上的字體搬上去,都沒辦法解決問題

最後我看到第三篇stackoverflow上的問題,解答者是用yum去安裝font,所以同理我在apt上找找,安裝我要的中文font就可以解決問題吧?

解決方法

確定是font問題,所以就來安裝字體吧!

以下是我的解決方法

  • 安裝微軟 True Type Core Fonts
sudo apt-get install ttf-mscorefonts-installer  
  • 安裝 fontconfig
sudo apt-get install fontconfig  
  • 用 apt 搜尋中文字體
$ apt-cache search chinese font

fonts-arphic-bkai00mp - "AR PL KaitiM Big5" Chinese TrueType font by Arphic Technology  
fonts-arphic-bsmi00lp - "AR PL Mingti2L Big5" Chinese TrueType font by Arphic Technology  
fonts-arphic-gbsn00lp - "AR PL SungtiL GB" Chinese TrueType font by Arphic Technology  
fonts-arphic-gkai00mp - "AR PL KaitiM GB" Chinese TrueType font by Arphic Technology  
fonts-arphic-ukai - "AR PL UKai" Chinese Unicode TrueType font collection Kaiti style  
fonts-arphic-uming - "AR PL UMing" Chinese Unicode TrueType font collection Mingti style  
fonts-droid - handheld device font with extensive style and language support  
fonts-sil-nuosusil - Unicode font for Yi (a script used in southwestern China)  
fonts-wqy-microhei - Sans-serif style CJK font derived from Droid  
fonts-wqy-zenhei - "WenQuanYi Zen Hei" A Hei-Ti Style (sans-serif) Chinese font  
fonts-cns11643-kai - Chinese TrueType font, TW-Kai (non-free)  
fonts-cns11643-sung - Chinese TrueType font, TW-Sung (non-free)  
fonts-moe-standard-kai - Chinese TrueType font, standard Kaiti (non-free)  
fonts-moe-standard-song - Chinese TrueType font, standard Song (non-free)  
emacs-intl-fonts - Fonts to allow multi-lingual PostScript printing from Emacs  
fonts-cwtex-docs - TrueType Font from cwTeX - example documents  
fonts-cwtex-fs - TrueType Font from cwTeX - FangSong  
fonts-cwtex-heib - TrueType Font from cwTeX - HeiBold  
fonts-cwtex-kai - TrueType Font from cwTeX - Kai  
fonts-cwtex-ming - TrueType Font from cwTeX - Ming  
fonts-cwtex-yen - TrueType Font from cwTeX - Yen  
latex-cjk-chinese-arphic-bkai00mp - AR PL KaitiM Big5 fonts for CJK  
latex-cjk-chinese-arphic-bsmi00lp - AR PL Mingti2L Big5 fonts for CJK  
latex-cjk-chinese-arphic-gbsn00lp - AR PL SungtiL GB fonts for CJK  
latex-cjk-chinese-arphic-gkai00mp - AR PL KaitiM GB fonts for CJK  
texlive-metapost - TeX Live: MetaPost and Metafont packages  
xfonts-intl-chinese - International fonts for X -- Chinese  
xfonts-intl-chinese-big - International fonts for X -- Chinese big  
xfonts-wqy - WenQuanYi Bitmap Song CJK font for X  

我安裝了前四個中文的 TrueType font package

sudo apt-get install fonts-arphic-bkai00mp  fonts-arphic-bsmi00lp  fonts-arphic-gbsn00lp fonts-arphic-gkai00mp  
  • 安裝完,跑一下cache
sudo fc-cache -fv  

結果

Chinese fonts weird blocks 總算不是框框了,雖然字體還是怪怪的,可能字體還要再找找吧!