作者nottt (無)
看板Web_Design
標題Re: [問題]使用CSS設定字型
時間Sat Feb 3 13:15:01 2018
※ 引述《lueichun (no anonymous)》之銘言：
: 我對以下的文字 透過CSS設定字型：
: <li><a href="#">待</a></li>
: li a{
: display:block;
: padding:17px;
: text-decoration:none;
: font:20px arial;
: color:black;
: }
: 所以我原本認為 li元素的高度寬度 都應該是17*2+20=54
: 然而我開啟開發者模式 看到的是以下這樣：
: https://imgur.com/RAGxZb3
: 高度是58
: 請問為什麼高度不是預期的54 而是58 多出來的4px 是哪來的？
這篇問題很有趣，所以我做了一個簡單的實驗
先說結論：
字體大小(font-size: OO px)，不等於顯示尺寸
https://codepen.io/not0000/pen/bLEmPd
在這篇實驗中，我放了兩種不同的字體，以及中文和英文兩種合計4個字
每個字都用span包起來，並且利用js取得該文字的寬度和高度，顯示在最下方
結果很清楚的顯示，不同字體，英文字的寬可以差到8px，中文字寬卻相同
會有這麼明顯的差異是因為我故意找了兩個寬度差很多的字體
我一下子找不到高差很多的字體，如果找到的話可以讓高度差距更明顯
想要拿一個"字"的寬高來計算也不是很好
因為大小寫、空白字元或符號等寬高都可能不一樣
如果想自己實驗，可以在這邊找到不同字體，扔上去玩看看
https://zh.wikipedia.org/wiki/Font_family_(HTML)
根據以上結果，若想要針對版面的尺寸計算，請不要直接把font-size當作計算基準
另外，font-size還有em、rem等屬性，字體使用px也已經被確認是個不太好的方式了
也可能有使用者自己調整瀏覽器、作業系統字體尺寸的情形(老人家眼睛看不清楚)
最好還是依照流動版面的概念，字真的又大又多就允許換行會是比較萬用的解法
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.181.253.96
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1517634905.A.6CE.html
1F：→ lueichun: 謝謝 那我想問 既然字體大小，不等於顯示尺寸 那我怎麼 02/03 14:13
2F：→ lueichun: 知道 某個字的長寬 究竟是多少 一定要開開發者模式才能 02/03 14:14
3F：→ lueichun: 知道嗎 02/03 14:14
4F：→ nottt: 開發者模式或是用js去取都可 02/03 15:25
5F：→ nottt: 文中我也提到可能使用者自己改字體大小，你看到的和別人看 02/03 15:27
6F：→ nottt: 到的可能不一樣 02/03 15:27
7F：推 peanut97: 容器設好height width，裡面的字再看fontsize 要怎麼設 02/04 02:29
8F：→ peanut97: 。 02/04 02:29
9F：→ miyabichiku: 字體使用 px 是從哪裡被確認為不太好的方式? 02/04 11:36