Windows 上的 Slack 字型顯示為細明體,不是很美觀,一個方式是直接用瀏覽器版的,另一種方式就是想辦法改變 Slack 顯示的字型。
版本 4.4 的方式
參考 4.0 的模式,只是把修改的檔案換成 preload.bundle.js
。
版本 4.2 ~ 4.3 的方式
參考 4.0 的模式,只是把修改的檔案換成 main-preload-entry-point.bundle.js
。
版本 4.0.x 的方式
找到這個目錄 C:\Users\[USERNAME]\AppData\Local\slack\app-4.0.1\resources
(版本及磁碟機可能不同),並找到其中的 app.asar
這個檔案。這是一個壓縮檔,我們要編輯裡面的檔案,加上自己的 style。
Windows
- 用 7-Zip 並加裝這個 Asar7z plugin 就可以用 7-Zip 開啟
app.asar
了。 - 開啟後,找到
dist\ssb-interop.bundle.js
並按滑鼠右鍵編輯。 - 加入下面的內容後並存檔,7-Zip 會詢問是否更新壓縮檔內容,選擇 [是](更新前應關閉 Slack,不然會無法寫入)。
其他作業系統
我沒有在用不太清楚,不過 macOS 可以用這篇的方法。
能編輯 ssb-interop.bundle.js
之後,就是要在最後面加入這段:
document.addEventListener('DOMContentLoaded', function() { var css = "[lang] *{font-family: 'Slack-Lato', 'Noto Sans CJK TC' !important;}", head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); head.appendChild(style); style.type = 'text/css'; if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } });
(調整字型的部分在第二行的 var css = ...
那裡,請參考下面 3.3.x 的地方)
版本 3.3.x 的方式
找到這個目錄 C:\Users\[USERNAME]\AppData\Local\slack\app-3.3.8\resources\app.asar.unpacked\src\static
(版本及磁碟機可能不同),並且編輯 ssb-interop.js
這個檔案。
像我要採用思源黑體,就在這個檔案最後面加上:
onload = function(){ $("<style></style>").appendTo("head").html("[lang] *{font-family: 'Noto Sans CJK TC' !important;}"); };
或者拉丁字母的部分想保留原來的字型,可以這樣寫:
onload = function(){ $("<style></style>").appendTo("head").html("[lang] *{font-family: 'Slack-Lato', 'Noto Sans CJK TC' !important;}"); };
這樣顯示字型就變得好看多了!