許多搜尋引擎會根據網頁適合行動裝置瀏覽的方式,決定網頁排名。尺寸小於 12 px 的字型通常難以在行動裝置上閱讀,而且可能需要使用者以舒適的閱讀大小放大顯示文字。
Lighthouse 字型大小稽核失敗的原因
Lighthouse 標記的字型大小太小,無法在行動裝置上輕鬆閱讀:
![Lighthouse 稽核顯示頁面採用難以辨識的字型大小](https://developer.chrome.google.cn/static/docs/lighthouse/seo/font-size/image/lighthouse-audit-showing-38ff49780439c.png?authuser=19&hl=zh-tw)
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">
標記。
詳情請參閱「沒有含有 width
或 initial-scale
的 <meta name="viewport">
標記」一文。