Spotify 界面換字體實(shí)戰(zhàn)spicetify-cli 3 分鐘搞定中文 Web Font 加載【免費(fèi)下載鏈接】spicetify-cliCommand-line tool to customize Spotify client. Supports Windows, macOS, and Linux.項(xiàng)目地址: https://gitcode.com/gh_mirrors/sp/spicetify-cliSpotify 桌面版默認(rèn)的字體偏歐美風(fēng)中文顯示效果一般尤其歌詞區(qū)小字號(hào)下略顯含糊。spicetify-cli 是一款用來定制 Spotify 客戶端的命令行工具支持 Windows、macOS 和 Linux它的主題機(jī)制允許我們把自定義 CSS 注入客戶端。借助這個(gè)機(jī)制只要改兩個(gè)文件就能讓全局文字、標(biāo)題、歌詞都換上你喜歡的字體比如霞鶩文楷全程不需要寫代碼。改哪些文件一次看懂主題的兩個(gè)部件動(dòng)手前先花一分鐘搞清楚目標(biāo)在哪。主題文件都在項(xiàng)目的Themes/目錄下核心是兩個(gè)樣式文件Themes/SpicetifyDefault/user.css負(fù)責(zé)加載字體資源和定義字體規(guī)則字體改動(dòng)主要寫在這里配色文件Themes/SpicetifyDefault/color.ini用 INI 格式定義主題配色內(nèi)置 green-dark、nord-light、nord-dark、pink-white、purple、dracula 共 6 套預(yù)設(shè)方案可以把 CSS 變量想象成界面的一塊開關(guān)面板面板上有一個(gè)叫--main-font的開關(guān)你把它的值調(diào)成霞鶩文楷所有引用這個(gè)開關(guān)的地方就跟著變。這就是整個(gè)改造的底層邏輯。把網(wǎng)絡(luò)字體接進(jìn)來字體文件不必放在本地用font-face指向 CDN 地址即可加載?？紤]到國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境推薦字節(jié)跳動(dòng)的霞鶩文楷或阿里巴巴的思源黑體這類有 CDN 加速的開源字體。下面這段同時(shí)完成聲明字體和注冊(cè)開關(guān)兩件事加在user.css開頭font-face { font-family: LXGW WenKai; src: url(https://cdn.staticfile.org/lxgw-wenkai/1.6.0/lxgwwenkai-regular.woff2) format(woff2); font-weight: normal; font-style: normal; font-display: swap; } :root { --player-bar-height: 105px; --main-font: LXGW WenKai, sans-serif; --title-font: LXGW WenKai, serif; }其中font-display: swap是關(guān)鍵設(shè)置字體下載完成前先顯示系統(tǒng)字體下載完成后自動(dòng)替換。沒有這行大字體的加載期間會(huì)出現(xiàn)先空白后顯示的閃爍。給正文、標(biāo)題和歌詞分別指定字體變量注冊(cè)好之后用三條規(guī)則把字體掛到對(duì)應(yīng)區(qū)域body, input, button { font-family: var(--main-font) !important; } h1, h2, .main-entityHeader-title, .main-trackList-rowTitle { font-family: var(--title-font) !important; font-weight: 600; }歌詞是獨(dú)立的場(chǎng)景。如果裝了 CustomApps/lyrics-plus/ 歌詞插件歌詞區(qū)不會(huì)自動(dòng)繼承全局字體需要單獨(dú)點(diǎn)名。該插件支持翻譯和日文假名轉(zhuǎn)換Furigana、Romaji、Hiragana、Katakana 四種模式字體調(diào)整同樣作用于這些轉(zhuǎn)換結(jié)果.lyrics-plus-line { font-family: var(--main-font) !important; font-size: 16px !important; line-height: 1.8 !important; }讓字體和 6 套預(yù)設(shè)配色互相配合換完字體后還要確認(rèn)文字在當(dāng)前配色下看得清。color.ini里每套方案都寫明了text主文本色、subtext次要文本色、main主背景色三個(gè)關(guān)鍵字段以 dracula 為例[dracula] text FFFFFF subtext d8dee9 main 282a36也就是說 dracula 下是白色字體落在深紫背景上而 nord-light 則是深色字體#2E3440配淺灰背景#ECEFF4兩套方向相反?？梢园粗黝}給字體顏色加一層自適應(yīng)保證深色、淺色模式下對(duì)比度都?jí)騜ody.theme-dark { --main-font-color: var(--spice-text); --subtext-font-color: var(--spice-subtext); } body.theme-light { --main-font-color: #333333; --subtext-font-color: #666666; }字體沒生效時(shí)的兩個(gè)排查點(diǎn)加載慢檢查font-face里是否帶了font-display: swap缺失時(shí)瀏覽器會(huì)阻塞渲染等待字體下載。部分區(qū)域沒換掉說明有優(yōu)先級(jí)更高的樣式覆蓋了你的規(guī)則。運(yùn)行 devtools 命令打開瀏覽器開發(fā)者工具對(duì)應(yīng)實(shí)現(xiàn)見 src/cmd/devtools.go在 Elements 面板里找到目標(biāo)元素查看哪條樣式壓住了font-family然后在你的規(guī)則上加!important強(qiáng)制生效。動(dòng)手前可以做的兩件事備份一份當(dāng)前的user.css改壞了直接還原先用 16px 左右的歌詞小字號(hào)試效果小字最能暴露字體的可讀性問題改完保存文件讓客戶端刷新主題后打開任意歌詞頁(yè)看看新字體是否按預(yù)期生效 【免費(fèi)下載鏈接】spicetify-cliCommand-line tool to customize Spotify client. Supports Windows, macOS, and Linux.項(xiàng)目地址: https://gitcode.com/gh_mirrors/sp/spicetify-cli創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考