iT邦幫忙

0

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

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

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

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2021-05-11 14:45:56 檢舉
強制font-weight ?
MAC的字體渲染比較特別,基本上所有字感覺都比在其他平台粗一點。
樓主要的是螢幕上看起來一樣,還是列印時看起來一樣
兩者解法不同,螢幕上看起來一樣,最簡單的把MAC的文字渲染弄到跟別的系統一樣就好,但列印一樣,就有點困難了,目前無解
淺水員 iT邦高手 3 級 ‧ 2021-05-11 17:10:10 檢舉
我們無法保證使用者的電腦上會安裝相同的字型。而canvas會以相似字型繪製
@froce
這招可以應用在CSS上沒錯。
但在Canvas並沒有效果,繪製出來的字就是會比較粗。

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

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

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

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

我現在是找對應的其實字型看看有沒有解決的方式。
canvas是在用戶端(前端)運作,除非你可以把canvas改用後端來生成圖片,前端用img或background-image呈現,否則真的沒法要求用戶端都要有相同的字型跟renderer ...
froce iT邦大師 1 級 ‧ 2021-05-12 08:22:13 檢舉
"ctx.font='600 30px Arial';"

在canvas強制指定font weight也不行?
淺水員 iT邦高手 3 級 ‧ 2021-05-12 09:50:18 檢舉
提一個可能性,我沒實際做過
有個 fontkit 專案:https://github.com/foliojs/fontkit
可以解出字型的路徑

解出來後再畫到 canvas 上面
過程中應該會用到 quadraticCurveTo 或 bezierCurveTo 等繪製貝茲曲線的方法
抓字型直接重繪嘛?好像也是一招,我試看看。
謝啦

尚未有邦友回答

立即登入回答