Slack – contingent thoughts

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;}");
};

這樣顯示字型就變得好看多了！

Tag Archives: Slack

Slack for Windows 變更字型