Re: [CSS] font-size:xxpx 在不同解析度下的表現

[GALINE (我是CQD，不是cqd)]

※ 引述《JYHuang (夏天到了，冷不起來了說)》之銘言：
: 推 GALINE:em是以當前字型大寫字母M的高度為1.0，ex則是小寫x高度      01/08 23:03
: → GALINE:em的效果跟%相同，只是數字差一百倍。ex我不用              01/08 23:04
: → GALINE:1PT是1/72吋，在螢幕上的大小則依DPI設定不同而變化         01/08 23:05
: → GALINE:px以螢幕為準，ex或%純粹調整倍率，pt以實際長度為準，三個  01/08 23:07
: → GALINE:適用的範圍都不相同。我個人喜歡用相對大小。但Firefox跟IE  01/08 23:08
: → GALINE:預設字型不一樣，這點我很頭大 /__\                        01/08 23:08
:    如同GALINE網所說的，相對大小(small,smaller,normal...等)會有差異
:    我設為font-size:small 在兩台電腦上各用Fx跟IE截圖下來
剛剛試了一下，IE的預設字型大小似乎跟dpi設定有關。
我把螢幕的DPI從120改回96以後，字型大小就相同了。

在同樣不套用任何CSS跟字型標籤的狀況下，Firefox字型大小始終是16px（以Firebug計
算的值為準），IE則是明顯看出大小跟著DPI變小。


我猜測IE6的預設字型大小為12pt。當螢幕解析度設定為大多數電腦預設的96DPI時：

12pt = 12 / 72 英吋 = 12 / 72 * 96 px = 16px

但一但DPI增加為120，計算出的像素大小就變成20px。


話說以前完全沒注意到這一點  O_oa


硬要說的話，16px跟12pt的確是不同的大小設定… :P
:    IE在 1280x1024 跟 1024x768 之下完全沒有差異
:    Fx則是差了幾級...
:    後來我又用VMWare開了個XP來測..
:    結果發現...不同版本的Firefox會有很細微的差異
:    像是一樣的CSS  Fx3.1Beta跟3.05位移了一個 pixel ￣▽￣||
:    另外..在另一台電腦上不知道是不是ServerPack版本不同..
:    Fx上的字型跟字距也是有些不同
:    這點IE倒是很從一而終...
看來是Gecko每次改版，顯示的畫面都會略有變…這有點麻煩

不過我個人本來就傾向於CSS排版要保留伸縮間隙，讓不同瀏覽器之間顯示時
版面可以「熱脹冷縮」而不至於破版。


從另外一個角度來說，要不就是IE的核心根本就沒怎麼改動，要不就是IE花了很大的功夫
保持各種狀況的向後相容性。

個人偏執的認為是前者，我就是情緒化的討厭他 =3=

--
不可以！那是黑鷹族的精神象徵！

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.47.118.32
※ 編輯: GALINE          來自: 114.47.118.32        (01/09 00:26)
→ GALINE:不過改個DPI還要重開電腦，效果才會套用到IE上…真麻煩
推 fotofolio:我都液晶銀幕 好像沒辦法改來試..
→ GALINE:我也是LCD。桌面上右鍵內容->設定值->進階->一般->DPI設定
※ 編輯: GALINE          來自: 114.47.118.32        (01/09 00:36)
推 fotofolio:對了 px是從那裡算到哪裡呀 我量16px的M不是真的16px ww
→ GALINE:http://tinyurl.com/7rhmcr 參考此文，point size
→ GALINE:留白多少我不知道，我"猜"是字型各自不同
推 fotofolio:好謎樣的留白...
→ GALINE:http://tinyurl.com/ynjbld 維基百科有條目…￣▽￣a
→ GALINE:em的來由是活字印刷字塊的寬度…我記成高度了 ~"~
推 JYHuang:話說這讓我想到了以前桌面王的網站......
→ JYHuang:從頭到尾全部都用圖來當頁面啊 ￣▽￣||
推 fotofolio:所以px好像也是指寬度（加上留白） 我都一直以為是高度
→ GALINE:全部圖片也某種意義上的終極解法，保證版面一定正確…XD
推 fotofolio:乾脆全flash...
→ GALINE:不過帶來另外一個問題：如何讓版面在30吋跟17吋螢幕上都充
→ GALINE:份可讀？我現在想到的是用PT設定字型跟版面寬度。但前提是
→ GALINE:使用者要設定DPI…而且這DPI可能得比實際數字大很多
推 fotofolio:等等 wiki是說高度沒錯啦...em was the height of the .
→ GALINE:版面可以用%取得跟畫面的相對比例，字型好像沒辦法?
→ fotofolio:還是用px就好了 應該不會有無聊廠商做1080p in 10吋lcd
→ GALINE:W3C的文件都寫em square，看來是無關長寬 XD
→ GALINE:但是有1920*1080的螢幕啊，用PX排版的話字會小的很可怕
→ GALINE:而且用PT排版的話，假設DPI設定正確，40吋螢幕跟20吋螢幕上
→ GALINE:的版型用尺量起來會一樣大…這問題很大其實 XD
推 fotofolio:版型px 字型pt吧...這樣考慮的話
推 evenwu:理想與實際還是有差距，建議用px最好
推 fotofolio:理想就是IE死光光 就用什麼都可以了www
推 chph:用px會讓IE使用者很困擾, 是非常糟糕的建議
推 fotofolio:把css放在<!--[if !IE]>--><!--<![endif]-->裡面！
推 fotofolio:可是IE使用者讓我們很困擾.. XDD
→ GALINE:乾脆用EM設定版面寬度，字型大小不管怎麼變化都不會破版
→ GALINE:我不建議用ie only的註解，同理我也不喜歡CSS hack
推 fotofolio:註解在編輯器理顏色不同 很容易裝做看不到..XD
→ GALINE:這是掩耳盜鈴啦 XD    我情感上不喜歡，實務上大概沒啥問題
→ TonyQ:建議是拋棄情感比較好 , 情感還是用來解決問題就好.
推 evenwu:IE使用者很困擾 <--讚阿 給他們困擾至死吧 XDDDD
推 adahsu:我推版型 px, 字型 em ...