字體大小換算

轉換器

常見字體大小參考

網頁設計常用的字體大小尺寸及其換算值（基於 16px 基礎字體）：

無障礙字體大小指南 (WCAG)

根據 WCAG 2.1 無障礙標準，建議以下最小字體大小以確保可讀性：

提示：避免使用小於 12px 的字體於正文內容。對於老年用戶或視力障礙者，18px 或更大會更容易閱讀。始終考慮提供使用者字體大小調整的選項。

什麼是字體大小換算工具？

字體大小換算工具是一個免費的線上實用程序，幫助開發者和設計師快速轉換不同的字體單位。在網頁開發中，字體大小可以用多種單位表示，包括 px（像素）、rem（相對於根元素）、em（相對於父元素）、pt（點數）、vw（視窗寬度百分比）等。

本工具支持以下單位的相互轉換：

• px - 像素，固定尺寸單位
• rem - 相對於根元素（html）的字體大小
• em - 相對於父元素的字體大小
• pt - 點數，印刷常用單位
• vw - 視窗寬度的百分比
• vh - 視窗高度的百分比
• % - 百分比，相對於父元素

如何使用

1. 設定基礎字體大小：在「基礎字體大小」欄位輸入参考值。預設為 16px，這是現代瀏覽器的標準。如果你的專案使用不同的基礎值，請修改此欄位。
2. 輸入數值：在「輸入數值」欄位輸入你要轉換的數字。
3. 選擇單位：從「選擇單位」下拉清單中選擇輸入值的單位（px、rem、em 等）。
4. 點擊轉換：按下「立即轉換」按鈕，工具會自動計算所有等效單位的值。
5. 查看結果：在結果表格中查看轉換後的所有單位值。每個結果旁邊都有複製按鈕，方便你快速複製數值。
6. 即時預覽：下方的預覽區域會實時顯示該字體大小的樣子，幫助你視覺化效果。

使用場景

網頁開發：當你需要在 CSS 中設定字體大小時，不同的專案可能偏好不同的單位。使用本工具快速轉換，確保設計稿與程式碼一致。

響應式設計：使用 rem 和 vw 單位可以讓字體在不同螢幕尺寸上自動縮放。本工具幫助你快速理解和轉換這些相對單位。

設計協作：設計師通常使用 px 或 pt，而開發者可能偏好 rem 或 em。本工具可以解決單位換算的困擾，促進團隊協作。

無障礙檢查：確保網站符合 WCAG 無障礙標準。本工具提供建議的最小字體大小，幫助你建立更易於閱讀的網站。

常見問題

rem 和 em 有什麼區別？

rem（root em）是相對於 HTML 根元素的字體大小。無論元素在 DOM 中的深度如何，1rem 總是等於根元素的字體大小（通常是 16px）。em 是相對於父元素的字體大小。如果父元素是 20px，那麼 1em 就是 20px。rem 通常更容易預測，而 em 適用於需要相對尺寸的組件。

什麼時候應該使用 px、rem 或 em？

px 適合固定尺寸的元素（如邊框、圖片）。rem 適合主要排版（標題、正文），因為它易於維護且支持全局調整。em 適合組件內部的相對尺寸，這樣組件可以獨立縮放。在現代網頁設計中，優先使用 rem 是最佳實踐。

16px 是怎麼來的？

16px 是現代網頁瀏覽器的預設字體大小。大多數瀏覽器將 HTML 根元素的預設字體大小設為 16px，使其成為開發者的標準參考值。如果使用者在瀏覽器設定中改變預設大小，整個頁面會根據 rem 單位相應縮放，這正是使用 rem 的優勢。

如何確保我的網站符合無障礙標準？

根據 WCAG 2.1，正文字體最少應為 16px。對於 AAA 級別（最高標準），18px 或以上更佳。避免在正文使用小於 12px 的字體。同時，提供使用者可調整字體大小的選項（如使用縮放功能或設定頁面）會大大提升無障礙性。本工具中的參考表可以幫助你規劃符合規範的字體大小。

vw 和 vh 單位適合用來設定字體大小嗎？

vw（視窗寬度）和 vh（視窗高度）是相對於視窗尺寸的單位。使用 vw 設定字體可以實現流暢的響應式排版，但要小心：在非常小的螢幕上，字體可能變得過小而無法閱讀；在超大螢幕上，可能變得過大。最佳實踐是結合 vw 和固定單位（如 px 或 rem），例如 `font-size: calc(14px + 1.5vw)`，這樣可以確保最小和最大可讀性。

為什麼我輸入的 em 值與預期不符？

em 的換算取決於父元素的字體大小。本工具的基礎字體大小設定是為了模擬 rem 和 em 的標準換算。如果你在 HTML 中的 em 值與工具結果不符，請檢查父元素的實際字體大小。若要準確計算，請將該父元素的字體大小設為基礎值輸入本工具。