Canvas的文字 fillText 輸出，在MAC上使用字體會比較粗

canvas mac

㊣浩瀚星空㊣ 2021-05-11 14:09:50 ‧ 869 瀏覽

分享至

這個問題來說，其實我在網路上有查過了。
的確在使用文字繪出時。
在mac上操作的文字繪出，會比其它系統上粗了一點。

我查了很久，查不到能解決的方式。
所以來這邊請教各位大大們。能不能給我一些明燈。

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2021-05-11 14:45:56 檢舉

強制font-weight ?
MAC的字體渲染比較特別，基本上所有字感覺都比在其他平台粗一點。

窮嘶發發發 iT邦高手 1 級 ‧ 2021-05-11 16:19:15 檢舉

樓主要的是螢幕上看起來一樣，還是列印時看起來一樣
兩者解法不同，螢幕上看起來一樣，最簡單的把MAC的文字渲染弄到跟別的系統一樣就好，但列印一樣，就有點困難了，目前無解

淺水員 iT邦大師 6 級 ‧ 2021-05-11 17:10:10 檢舉

我們無法保證使用者的電腦上會安裝相同的字型。而canvas會以相似字型繪製

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-05-12 01:29:19 檢舉

@froce
這招可以應用在CSS上沒錯。
但在Canvas並沒有效果，繪製出來的字就是會比較粗。

@窮嘶發發發
主要是圖檔生成後要一樣。倒也沒有螢幕跟列印的問題。
畢竟輸出為圖片後就定格了。也就不用擔心要顯示跟列印的問題了。

@淺水員
目前用的是SERVER載入字型檔的方式。所以倒是不擔心電腦需要安裝字型的問題。
認真來說，目前用的的確也是特別的字型，一般用戶不可能會有這個字型的。

上面的回答我怕你們可能有誤會。
如果是單純的HTML搭配CSS的情況下。我是能解決的。

目前是用Canvas繪製，在繪製文字處理方面。
在MAC上繪製出來的文字，就是會很明顯的變粗。
雖然在繪製上可以給與單純的CSS處理。不過看起來有些CSS的語法是沒作用的樣子。

我現在是找對應的其實字型看看有沒有解決的方式。