文件不得使用易讀的字型大小(')

許多搜尋引擎會根據網頁適合行動裝置瀏覽的方式,決定網頁排名。尺寸小於 12 px 的字型通常難以在行動裝置上閱讀,而且可能需要使用者以舒適的閱讀大小放大顯示文字。

Lighthouse 字型大小稽核失敗的原因

Lighthouse 標記的字型大小太小,無法在行動裝置上輕鬆閱讀:

Lighthouse 稽核顯示頁面採用難以辨識的字型大小

Lighthouse 旗標頁面時,有 40% 以上文字的字型大小小於 12 像素。當頁面未通過稽核時,Lighthouse 會在資料表中列出結果,並包含四個資料欄:

資料來源 導致文字難以閱讀的 CSS 規則集來源位置。
選取器 規則集的選取器。
網頁文字百分比 網頁上受到規則集影響的文字百分比。
字型大小 文字的運算大小。

如何修正難以辨識的字型

檢查 CSS 中的字型大小。字型大小至少為網頁文字的 60% 以上。

如何修正缺少可視區域設定

如果 Lighthouse 回報為 Text is illegible because of a missing viewport config,請在文件的 <head> 中加入 <meta name="viewport" content="width=device-width, initial-scale=1"> 標記。

詳情請參閱「沒有含有 widthinitial-scale<meta name="viewport"> 標記」一文。

資源

「文件」的原始碼未使用清晰易讀的字型大小稽核作業