不同瀏覽器如何使用不同字體引擎呈現 PDF 文字
當您在同一台電腦上的 Google Chrome 和 Mozilla Firefox 中開啟同一個 PDF 檔案時，兩個完全不同的 PDF 渲染引擎會處理該文件。 Chrome 使用 PDFium，這是一個最初由 Foxit 開發的 C++ 程式庫，現在由 Google 作為 Chromium 專案的一部分進行維護。 Firefox 使用 PDF.js，這是 Mozilla 開發的基於 JavaScript 的渲染器，完全在瀏覽器的 JavaScript 引擎內運行。這兩個引擎具有根本不同的字體處理方法，即使在渲染相同的 PDF 原始檔時，這些差異也會導致文字清晰度出現明顯變化。
PDFium 使用作業系統的本機字體渲染堆疊來渲染文字。在 Windows 上，這意味著它使用 DirectWrite，它會應用針對 LCD 顯示器最佳化的子像素抗鋸齒功能。在 Mac 上，它使用 Core Text，它應用不同的抗鋸齒演算法，優先考慮形狀保真度而不是像素網格對齊。這些作業系統層級的字體呈現差異意味著，在考慮跨瀏覽器差異之前，在 Windows 上的 Chrome 和 Mac 上的 Chrome 中開啟同一 PDF 中的PDF 字體 時，其外觀可能會明顯不同。
PDF.js 採用了完全不同的方法。它使用瀏覽器自己的畫布文字渲染 API 將文字渲染到 HTML5 畫布元素上。這意味著文字渲染品質取決於瀏覽器的畫布實作（在 Firefox 和 Chrome 之間有所不同）以及瀏覽器的字體匹配邏輯（決定如何定位和載入 PDF 中引用的字體）。 Chrome 在系統字體目錄中找到並使用硬體加速 DirectWrite 渲染的字體可能會被 Firefox 匹配到稍微不同的字體變體，或者透過不同的抗鋸齒程式碼路徑渲染。
字體嵌入、替換及其對文字清晰度的影響
完全嵌入所有字體的 PDF 理論上應該在每個檢視器中呈現相同的效果，因為顯示文字所需的確切字體資料位於文件內部。實際上，即使完全嵌入的字體在不同瀏覽器中的渲染效果也不同，因為字體光柵化器（將字體輪廓轉換為螢幕像素的元件）在每個渲染引擎中都是不同的。 PDFium 使用 FreeType 或作業系統本機光柵化器，具體取決於平台。 PDF.js 依賴瀏覽器的畫布文字渲染，它透過瀏覽器的渲染管道間接使用作業系統文字渲染堆疊。
當 PDF 中沒有嵌入字體時（這種情況在辦公室套件和列印到 PDF 驅動程式建立的文件中仍然很常見，這些驅動程式引用系統字體而不是嵌入它們），PDF 查看體驗在不同瀏覽器中的差異甚至更大。 Chrome 和 Firefox 都有自己的字體替換邏輯和自己的一組預設替換字體。引用「Helvetica」但未嵌入的 PDF 可能會在一個瀏覽器上以 Arial 形式顯示，在另一個瀏覽器上以不同的無襯線替代形式顯示，如果沒有配置合適的替代形式，則在第三個瀏覽器上顯示為空白矩形。
字體提示是調整字體輪廓以與小尺寸的像素網格對齊以獲得更清晰的螢幕顯示的過程，是跨瀏覽器清晰度變化的另一個來源。桌面 PDF 檢視器會套用嵌入在字型檔案中的字體提示指令。透過瀏覽器畫布呈現的 PDF.js 可能會忽略或部分套用提示指令，因為畫布 API 不會向應用程式公開字體提示控制。這意味著小文本（通常為 10 點及以下）在基於瀏覽器的檢視器中可能比在同一台電腦上的桌面檢視器中顯得更柔和或更不清晰。
抗鋸齒差異及其對感知清晰度的影響
抗鋸齒功能透過在文字顏色和背景顏色之間的陰影中對邊緣像素進行著色來平滑文字字元的鋸齒狀邊緣。不同的抗鋸齒演算法會產生不同的銳利度主觀印象，不同的渲染引擎會做出不同的演算法選擇。
Windows 上的 DirectWrite 所使用的子像素抗鋸齒功能利用 LCD 顯示器中紅色、綠色和藍色子像素的物理排列，將文字渲染的有效水平解析度提高了三倍。使用子像素抗鋸齒渲染的文字在小尺寸下看起來明顯比使用灰階抗鋸齒渲染的文字更清晰，灰階抗鋸齒將每個像素視為一個統一的單位。 Windows 上的 Chrome 透過 DirectWrite 使用子像素抗鋸齒功能。 Windows 上的 Firefox 預設對畫布渲染文字（包括 PDF.js 輸出）使用灰階抗鋸齒。在同一台 Windows 電腦上的 Chrome 和 Firefox 中查看的同一個 PDF 可能在一種瀏覽器中看起來很清晰，而在另一種瀏覽器中看起來稍微柔和，這僅僅是因為抗鋸齒差異。
在高 DPI 顯示器上，抗鋸齒差異變得不那麼明顯，因為更高的像素密度提供了足夠的物理分辨率，即使使用更簡單的抗鋸齒演算法也能清晰地渲染文字。作業系統縮放率為 200% 的 4K 顯示器每個字元都有足夠的像素，因此子像素和灰階抗鋸齒之間的差異幾乎無法察覺。在 100% 縮放的標準 1080p 顯示器上，每個字元都用相對較少的物理像素渲染，抗鋸齒選擇對感知文字品質的影響要大得多。
確保跨瀏覽器一致的 PDF 文本呈現的實用步驟
如果主要透過Web 到 PDF基於瀏覽器的渲染來查看 PDF，則有幾種做法可以提高跨瀏覽器文字的一致性。將所有字體嵌入 PDF 中，而不是依賴系統字體引用。嵌入字體保證每個渲染引擎都可以存取完全相同的字體數據，從而消除字體替換作為渲染差異來源的情況。
使用專為典型文字大小的螢幕渲染而設計的字體。與依賴光柵化器在沒有提示的情況下產生良好結果的字體相比，具有良好提示指令的字體在各個渲染引擎中產生更一致的結果。來自 Google Fonts 等服務的 Web 最佳化字體通常非常適合常見文字尺寸的螢幕顯示，並且將它們嵌入到用於瀏覽器檢視的 PDF 中，比使用專為膠印機輸出設計的列印最佳化字體會產生更可預測的跨瀏覽器結果。
在將 PDF 發佈到可透過網路存取的位置之前，請在 Chrome、Firefox 和 Edge 中測試 PDF。在標準解析度顯示器上以 100% 縮放進行並排比較可以發現文字清晰度差異，這些差異值得在文件到達最終用戶之前解決。如果一種瀏覽器顯示的文字比其他瀏覽器明顯柔和，則調整字體嵌入設定或將正文文字大小增加一點通常可以使所有三種瀏覽器達到可接受的視覺一致性。
WukongPDF 的 PDF 匯出選項包括字體嵌入設置，可確保所有字體完全嵌入到輸出檔案中，從而消除字體替換作為跨瀏覽器文字呈現差異的根源。
瀏覽器 PDF 渲染的更廣泛趨勢是趨同而不是趨異。 Chrome 的 PDFium 和 Firefox 的 PDF.js 都會定期更新，以提高文字渲染品質和一致性。兩年前，這些引擎之間的渲染差異比現在大得多。在基於網路的文件檢視日益重要的推動下，這兩個引擎的持續發展正在逐漸縮小跨瀏覽器的文字品質差距。對於文件出版商來說，這種趨勢意味著當今對跨瀏覽器渲染測試的投資所產生的文件將隨著底層引擎的不斷改進而呈現得更加一致。
出於可訪問性的目的，瀏覽器之間的文字呈現差異具有超越美觀的次要影響。從瀏覽器呈現的 PDF 中提取文字的螢幕閱讀器取決於瀏覽器的文字擷取準確性，這與瀏覽器的 PDF 引擎內部如何表示文字直接相關。清晰呈現文字的瀏覽器通常也會準確地提取文字以供螢幕閱讀器使用。使用跨多個瀏覽器的螢幕閱讀器測試 PDF 可訪問性，確保文件不僅在視覺上一致，而且無論螢幕閱讀器使用者喜歡哪種瀏覽器，都可以透過程式設計存取。
這些跨瀏覽器差異的實際影響在很大程度上取決於文件的受眾和分發管道。用於在收件者首選的桌面應用程式（Acrobat、Preview 或 Foxit）中下載和檢視的 PDF 不需要瀏覽器渲染最佳化。嵌入網頁並由數百上千用戶直接在瀏覽器中查看的 PDF 從本文中描述的測試和優化實踐中受益匪淺。將最佳化工作與主要檢視環境相符可確保資源用在對使用者影響最大的地方。
PDF 嵌入的字體格式的選擇也會影響跨瀏覽器渲染的一致性。具有良好提示指令的 TrueType 字體通常會比 PostScript Type 1 字體在渲染引擎中產生更一致的結果，PostScript Type 1 字體是一種較舊的格式，提示支援不太複雜。在同一檔案中同時包含 TrueType 輪廓和 PostScript 輪廓的 OpenType 字型（一種稱為 OpenType CFF 的格式）可以根據呈現引擎選擇的輪廓格式產生不同的呈現結果。為了獲得最大的跨瀏覽器一致性，請嵌入 TrueType 風格的 OpenType 字型以及針對常見文字大小的螢幕顯示而最佳化的提示指令。
色彩管理與文字渲染以微妙的方式相互作用，影響感知的清晰度。與沒有色彩設定檔或具有 CMYK 設定檔的相同 PDF 相比，具有嵌入 RGB 色彩設定檔的 PDF 渲染的文字與背景的對比度可能略有不同。瀏覽器對 PDF 內容的色彩管理支援有所不同，瀏覽器的色彩管理、作業系統的顯示校準和 PDF 嵌入的色彩設定檔之間的互動可能會影響黑色文字顯示為純黑色還是稍淺的深灰色，即使文字渲染解析度相同，這也會在知覺上影響清晰度。