CSS 文字大小 em 和 px 的單位換算比較表

W3C 規定的文字單位是 em , 而一般的網頁設計師習慣的文字單位是 px, 使用 px 的時候~ 在使用 IE 瀏覽器時,使用者是無法自行調整文字大小的~ 因此要製作符合「無障礙網頁」就必須使用 em 為單位。

一般瀏覽器中預設的文字大小是 16 像素

CSS 教學 - 網頁排版  - CSS 文字大小 em 和 px 的單位換算比較表 - fly06

也就是說瀏覽器預設的 em 大小就是 16 px,當我們的網頁中的文字沒有做任何的調整時,預設值就是 1em 也就是 16 px ,需要製作符合「無障礙網頁」的標準,文字就必須全部使用 em 為單位,這個規定對於大部份的網頁設計師實在是不太習慣,例如當我們想要將文字大小設定為 12px 的時候,就必須改寫為 0.75em 才行….

以下的圖表是 em 和 px 預設的換算表

CSS 教學 - 網頁排版  - CSS 文字大小 em 和 px 的單位換算比較表 - font_size_272

另外,我們也可以在網路上找到一些 em 與 px 轉換的計算機~ 相當的方便喔~ 如下:

http://pxtoem.com/

http://riddle.pl/emcalc/

CSS 教學 - 網頁排版  - CSS 文字大小 em 和 px 的單位換算比較表 - smil490936d2e1442 CSS 教學 - 網頁排版  - CSS 文字大小 em 和 px 的單位換算比較表 - smil490936d2e1442 CSS 教學 - 網頁排版  - CSS 文字大小 em 和 px 的單位換算比較表 - smil490936d2e1442 CSS 教學 - 網頁排版  - CSS 文字大小 em 和 px 的單位換算比較表 - smil490936d2e1442

by
姜智豪
老師

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , , , , .

留言功能已關閉。