為什麼將手機屏幕倒過來看會看到文字的彩邊，但正著看卻幾乎感覺不到？

01-05

標準 RGB 排列的屏幕（如 iPhone 系列），倒過來看的話，會覺得文字會有輕微的彩邊。我知道彩邊是因為屏幕本身是由紅綠藍三原色的亞像素組成的，但問題是為什麼正著看就很難感覺到呢？是因為習慣嗎？

不對，後來才發現 iPhone 沒有次像素渲染。以下內容應該沒有解決題主的疑問……暫且當勉強沾邊的科普算了。

＊＊＊

這可能是次像素渲染（subpixel rendering）的效果。換言之，文字的「彩邊」是故意的。

先從計算機圖形顯示的大致原理來說。由於計算機的內部表示是離散的，所以對連續的圖形，它對其中每個最小的元素——像素——進行採樣，獲得這一點的顏色，然後就可以把圖像表示成一批像素按一定規律形成的組合。

文泉驛點陣宋體效果圖，圖片來自 Habitat: FontGuide

但這樣做的話，文字的邊沿就不夠平滑。雖然水平和豎直的筆畫效果不錯，但斜向的筆畫就變成了鋸齒。爲了處理這個問題，業界常用的抗鋸齒方法大致是，先把圖像按照（比方說）兩倍的尺寸渲染到一個 buffer 上，然後對 buffer 再度採樣，相鄰的四個點取平均值。這樣就會在筆畫輪廓附近填上一圈灰色的像素，緩和鋸齒感。這樣的方法就是灰階抗鋸齒（Grayscale Antialiasing）

圖片來自 3d view - Can the 3D viewport be set to draw smooth (anti-aliased) wireframe?

在這個基礎上怎樣取得更好的效果？理想情況下，一個像素是圖片顯示的最小單位，但在顯示器上一個像素是由紅綠藍三個通道組成的，換言之每個像素依然可以繼續分割。做灰階抗鋸齒時，一個像素內的三個通道是相同亮度的。這樣一來，整個像素混合出來的顏色也是不同深淺的灰色。繼續分割，就是分別計算三個通道的亮度，然後這個像素顯示出來就是彩色。

假設一個像素在水平方向上依次分爲紅綠藍三色，如果採樣的結果是這個像素的左邊比右邊亮，那麼我們就讓左邊紅色的通道比右邊的通道更亮。

圖片來自 File:Antialias-vrs-Cromapixel.png

這就是次像素渲染。這樣渲染的結果，對計算機的內部表示，就是文字會有彩邊。當你放大時，就像題主給出的圖那樣明顯。但你在顯示器上按照原來的尺寸顯示時，得到的就是平滑的曲線。畢竟屏幕上沒有單獨的白色通道，所有的顏色都是相鄰的 RGB 通道複合而來。只不過當你的眼睛裡屏幕足夠遠、像素足夠小，小到你分不清每個像素中的每個通道時，你就看不出來了。類似的，像素雖然非常大，但你隔很遠觀看也看不出來單個像素的 LED 廣告。

圖片來自 https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/1_times_square_night_2013.jpg/640px-1_times_square_night_2013.jpg另一方面，正因爲次像素渲染依賴顯示器的硬體細節，所以需要比較多的設置。例如有的時候你需要選擇你的屏幕的 RGB 方向。對於手機這樣的移動設備，屏幕旋轉一下都需要針對 RGB 通道的新排列重新渲染。

如果把文字截圖、放大來看，的確有彩邊，左邊偏紅，右邊偏藍：

但在原先的大小下，是看不出彩邊的。

這種設計應該是利用了人眼的某種特性，不過具體原理我也講不上來。你說的「倒過來看有彩邊」，也許是因為彩邊變成了左邊偏藍，右邊偏紅，人眼看起來不習慣，就注意到了。

歡迎加入Linux，這會使你不用倒過來看就能發現彩邊。為了不被噴調侃詳細點吧。上次裝Ubuntu不知道啥裝錯了，能夠正常運行。但是屏幕上的字跟擼了10天一樣模糊的要死，還出現虛影。打開webstorm 菜單上的字直接來了個三原色鑲邊亮瞎你的狗眼。當然後來重裝一次這種情況就沒了… 說這麼多隻想表達當字體渲染方式不同顯示的情況也不同。