作者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/cn.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