去年做一個(gè)國(guó)內(nèi)站點(diǎn)的自動(dòng)化巡檢項(xiàng)目，本地 Windows 環(huán)境調(diào)試得順風(fēng)順?biāo)?，一部署?Ubuntu 服務(wù)器就集體翻車：截圖里的中文全變成了方塊豆腐，所有帶時(shí)間的斷言差了整整 8 小時(shí)，站點(diǎn)還自動(dòng)跳轉(zhuǎn)到了國(guó)際版英文界面，寫好的 CSS 選擇器全部失效。一開(kāi)始以為是工具 bug，挨個(gè)翻 Playwright 的 issue，最后發(fā)現(xiàn)全是環(huán)境配置的問(wèn)題——瀏覽器不是孤立運(yùn)行的，它深度依賴操作系統(tǒng)的字體、時(shí)區(qū)、語(yǔ)言環(huán)境。這些東西在桌面環(huán)境里默認(rèn)都配齊了，一到無(wú)桌面的服務(wù)器、Docker 容器里就全暴露出來(lái)了。這些問(wèn)題看似零散，本質(zhì)上都是系統(tǒng)環(huán)境與瀏覽器內(nèi)核的交互機(jī)制。搞懂底層原理，再遇到同類問(wèn)題就不用靠猜了。一、中文字體渲染：方塊豆腐背后的 fontconfig 機(jī)制最常見(jiàn)也最顯眼的問(wèn)題：中文顯示成一個(gè)個(gè)空心方塊（業(yè)內(nèi)叫 tofu，豆腐塊）。很多人的解決辦法是隨便搜個(gè)字體裝上，運(yùn)氣好就好了，運(yùn)氣不好繼續(xù)踩坑。1.1 底層渲染鏈路瀏覽器渲染文字不是自己憑空畫的，完整鏈路是這樣的：Linux 服務(wù)器版默認(rèn)只安裝英文等拉丁字體，沒(méi)有任何中文字體包。當(dāng)頁(yè)面需要渲染中文時(shí)，fontconfig 遍歷完所有字體都找不到對(duì)應(yīng)字形，最終就會(huì)顯示成方塊。這里有個(gè)容易忽略的細(xì)節(jié)：字體匹配的時(shí)間復(fù)雜度是 O(n)，n 是系