瀏覽器渲染文本過程分析

2024-07-11 08:29:29

字體：大中小

供稿：網(wǎng)友

瀏覽器是我們最常用的軟件之一，文本又是網(wǎng)頁中最主要的元素，在瀏覽器顯示文本的過程中有許多有趣的細節(jié)，值得展開來講講，或許能減少一些誤解。這是一個比較粗略的，概括性的介紹，盡可能不涉及過多的技術(shù)細節(jié)和具體實現(xiàn)，而立足于給 Web 開發(fā)者和設(shè)計師提供一些正確的概念。
下面的介紹主要根據(jù)我對 WebKit 和 Gecko (Firefox) 的印象來談，其他的瀏覽器也大致相同，如有闕漏之處歡迎指出。

當(dāng)瀏覽器收到來自 Web 服務(wù)器的網(wǎng)頁數(shù)據(jù)之后，第一步是要把它解碼成可以閱讀的文本，因為歷史原因，不同區(qū)域和語言的網(wǎng)頁可能會使用不同的編碼方式，而瀏覽器判斷編碼主要是依據(jù)以下方法：
1.Web 服務(wù)器返回的 HTTP 頭中的 Content-Type: text/html; charset= 信息，這一般有最高的優(yōu)先級；
2.網(wǎng)頁本身 meta header 中的 Content-Type 信息的 charset 部分，對于 HTTP 頭未指定編碼或者本地文件，一般是這么判斷；
3.假如前兩條都沒有找到，瀏覽器菜單里一般允許用戶強制指定編碼；
4.部分瀏覽器 (比如 Firefox) 可以選擇編碼自動檢測功能，使用基于統(tǒng)計的方法判斷未定編碼。

編碼確定后，網(wǎng)頁就被解碼成了 Unicode 字符流，可以進行進一步的處理，比如 HTML 解析了，不過我們這里跳過 HTML/XML 解析的細節(jié)，單講得到了解析后的文本元素之后該怎么處理。
因為我們得到的文本可能是很多種語言混雜的，里面可能有中文、有英文，它們可能要用不同的字體顯示；也可能有阿拉伯文、希伯來文這種從右到左書寫的文字；也有可能涉及印度系文字這樣涉及復(fù)雜布局規(guī)則的文字；另外，還可能有網(wǎng)頁內(nèi)自己指定的文本語言，比如 <span lang="jp">日本語</span> 這樣的標記，使得日文漢字可以使用日文字體顯示 (因為 Han Unification 導(dǎo)致這些漢字和中文里的漢字使用同樣的代碼點，盡管很多寫法不同)，"lang" 屬性也可以在 HTTP 頭、<meta> 或者 <html> 出現(xiàn)，用于標記整個文檔的全局語言，通常這是一種好的習(xí)慣，方便瀏覽器進行字體匹配。
為了統(tǒng)一處理所有這些復(fù)雜的情況，我們要將文本分為由不同語言組成的小段，在有的文本布局引擎里，這個步驟稱為“itemize”，分解后的文本段常被稱作“text run”，但是具體劃分的規(guī)則可能根據(jù)不同的引擎有所區(qū)別，比如 HarfBuzz 和 ICU 一般是根據(jù)要使用的不同排版類來劃分 (常稱作“shaper”)，比如英語和法語可能使用同一個 shaper 排版，那么相鄰的英語和法語文本就會劃分到同一個 run 里，而希伯來文需要另一個 shaper，就劃分到它自己的 run 里，以 HarfBuzz 為例，它有這樣一些 shaper：
通用的 (適用于中文、英文等等大多數(shù)布局規(guī)則簡單的語言)

上一篇：display:inline-block的原理分析

下一篇：css margin屬性深入解析