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