Re: [問題]使用CSS設定字型
※ 引述《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://www.ptt.cc/bbs/Web_Design/M.1517634905.A.6CE.html
→
02/03 14:13,
6年前
, 1F
02/03 14:13, 1F
→
02/03 14:14,
6年前
, 2F
02/03 14:14, 2F
→
02/03 14:14,
6年前
, 3F
02/03 14:14, 3F
→
02/03 15:25,
6年前
, 4F
02/03 15:25, 4F
→
02/03 15:27,
6年前
, 5F
02/03 15:27, 5F
→
02/03 15:27,
6年前
, 6F
02/03 15:27, 6F
推
02/04 02:29,
6年前
, 7F
02/04 02:29, 7F
→
02/04 02:29,
6年前
, 8F
02/04 02:29, 8F
→
02/04 11:36,
6年前
, 9F
02/04 11:36, 9F
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇)：
