2024年11月3日

PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?

PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?

Wayne Fu 0 A+
ptt-font-size-high-contrast.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?最近「為了克服電腦背光,使用大尺寸螢幕」,PTT 在遠距離看起來字體顯的不夠大。由於 PTT 使用頻率算高,為了讓眼睛看得舒服,有必要對 PTT 進行版面完整優化。 需要調整的事項不少,而且過程不輕鬆,本篇會分享在瀏覽器使用下,PTT 網頁版如何加大加粗字體、放大版面、使用高對比模式等心得。

一、PCMAN 的侷限

1. PCMAN 選項 平常上 PTT 使用的工具是「PCMAN」,其預設功能會隨視窗自動調整字體大小,所以無法放大字體。如果想手動設定字體大小,可參考這篇「pcman的字體問題」:
  • 「選項」→「自訂pcman各項設定」→「其他BBS設定」→ 取消「字體大小隨視窗大小動態調整」
  • 然後就能設定字體大小
  • 或是到「選項」→「快速BBS選項」→「設定BBS字型」,也能設定字體大小
2. PCMAN 的問題 即便可以設定字體大小,但若設定了太大的數值,版面就會爆炸,超出版面的內容會看不到。 總之,手動調整大小有個上限存在,效果不會比預設的自動調整功能好多少。 3. 全螢幕模式 為了提高字體大小顯示的上限,拉大版面範圍以容納更多文字,去除版面不必要的區塊,例如選單、網址、頁籤等等,PCMAN 提供了「全螢幕」模式,切換的快速鍵為 Alt + Enterptt-font-size-high-contrast-1.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服? 雖說是「全螢幕」模式,如上圖紅框,PCMAN 還是保留了網址列、頁籤,佔了不少高度,也降低了字體大小的上限,所以無論如何 PCMAN 不會是遠距離看螢幕的最佳解。

二、PTT 網頁版優化

PTT 想要在全螢幕下有最大的版面空間,效果最好的會是 PTT 網頁版,使用以下網址進入 PTT: ptt-font-size-high-contrast-2.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服? 如上圖,按 F11 進入全螢幕模式後,可看到網址列、頁籤等區塊都沒了,可視範圍最大,接下來可開始研究如何優化字體大小 1. 設定字型 在 PTT 網頁版的頁面之下,按右鍵 → 設定,就能設定字型及大小,但也不是什麼字型都能隨意設定,可參考這個討論串「PTT如何調字型」,推文提到這些資訊:
  • 改成細明體 或其它等寬字型
  • 「SymMingLiu」放最前面 後面可放自己喜愛的字型
經我實測的結果,的確是這個樣子,查了維基百科「等寬字型」後知道,中英文等寬的字型有「細明體」,而「微軟正黑體」非等寬字型。 只要設定了「非等寬字型」,例如我嘗試「微軟正黑體」後,果然版面馬上參差不齊。後來開 Chrome 開發人員工具研究許久,總算搞懂是怎麼回事:
  • 「SymMingLiu」是作者自創的英文等寬字型,應該是特別設計過的寬度,兩個英數字元寬度與中文字元相符,版面才不會亂掉
  • 如果不使用「SymMingLiu」而是其他的英文等寬字型,則寬度不一定與中文字元相符,版面依然會亂掉
2. 使用自訂字型 了解以上原理後,就有辦法在 PTT 設定任何中文字型了,請先參考這篇「網頁中英文字型跨平台設定最佳化」,了解 CSS 套用中英文字型的優先順序說明:
  • 英文字型在前、中文字型在後,這是正確的設定方法。
  • 例如先設定英文等寬字型「SymMingLiu」,再設定中文字型「微軟雅黑體」,即便「微軟雅黑體」不是等寬字型也能正常顯示,可參考下圖
ptt-font-size-high-contrast-3.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服? 3. 等寬字型 如果使用中文等寬字型的話,那麼就不需要設定「SymMingLiu」,以下這些是我逐一實測,Win10 可使用、能顯示中文的等寬字型:
  • 細明體(MingLiu)
  • 標楷體
  • 宋體(SimSun)(簡體)
  • MS Gothic(日文)
雖說「宋體」、「MS Gothic」非正體中文字型,其實仍能正常顯示中文。 4. 最佳字型 MS Gothic 逐一比對所有能顯示中文的字型後,「MS Gothic」的筆劃最粗,在螢幕上看起來最明顯,遠距離下觀看螢幕眼睛最舒服,所以最推薦設定的字型就是「MS Gothic」。 同時設定中「BBS 終端機大小」選擇「固定字體大小」後,還能自訂字體大小,讓 PTT 顯示的行數更多。

三、高對比模式

1. Chrome 套件 PTT 預設配色為黑底白色,我個人眼睛看久了沒那麼舒服,但如果是白底黑字就能長時間閱覽,所以想找看看有什麼方法可將 PTT 網頁版配色改成白底黑字,也測試了 Chrome 所有高對比套件。 直接說結論:
  • 沒有一個可以讓網頁變成白底黑字
  • 大部份是色彩轉換灰階效果,但由於 PTT 預設使用了各種的色彩、以及深淺配色,轉換成灰階後很容易某些顏色看不到
2. Windows 高對比佈景 所以想要真正的白底黑字效果,最終還是要靠 Windows 提供的高對比模式佈景主題,使用熱鍵可切換成其中一種「白底黑字」模式,詳細說明及操作技巧可看這篇「Win10 自訂快速鍵切換高對比模式」。

四、Chrome 套件 Dark Reader

前面提到測試 Chrome 高對比套件,其中有一款「Dark Reader」,雖然沒有白底黑字效果,但無意間倒是被我試出一種很適合 PTT 使用的設定。 這個套件如同其名稱,目的是提供深色佈景配色,原本不會在我的考慮範圍,但因為功能很強大,所以花了些時間測試效果。只是設定過於複雜,摸索很久才大概知道怎麼回事,以下直接展示我的設定畫面: ptt-font-size-high-contrast-4.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?
  • 打勾啟用 term.ptt.cc
  • 「濾鏡」分頁:維持「深色」模式
  • 灰階:調整到 +65(可自行修改為看了舒服的數值)
ptt-font-size-high-contrast-5.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?
  • 「更多選項」分頁:
  • 字型改為「MS Gothic」,前面提過,這是最粗、眼睛看了最舒服的字體
  • 文字描邊:這個功能超強,可以讓字體變得更粗!我設為 +0.3
  • 選擇「濾鏡」模式,可產生淺底佈景配色
  • 點選「僅適用於 term.ptt.cc」,才不會影響其他網站的配色效果
ptt-font-size-high-contrast-6.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服? 點擊「設定網站切換」:
  • 取消「預設啟用」
  • 取消「偵測深色主題」
ptt-font-size-high-contrast-7.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服? 上圖是 Dark Reader 調整設定後的 PTT 版面配色,雖然不全然是白底黑字,但多了一些粉色系的配色,畫面倒是活潑不少。

五、製作網址捷徑

如果常用 PTT 網頁版的話,可以將 PTT 網址做成捷徑,例如修改原本 Chrome 的捷徑如下: "C:\Program Files\Google\Chrome\Application\chrome.exe" https://term.ptt.cc/
  • chrome.exe 請改為自己的路徑
  • 將捷徑名稱改為 PTT
  • 圖示可以從 PCMAN 執行檔抓來用
將來從桌面或工作列,就能直接執行網頁版 PTT 了。
更多 PTT 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP