我想将我的新网站从像素转换为ems。我的问题是,我是否也应用ems到我的文本行高属性?EM的线高
EM的线高
回答
假设“转换为ems”意味着使用em
单位为font-size
,那么您应该设置line-height
以适应字体大小的方式。这两个属性是密切相关的,如果您在em
中设置了其中一个属性,而另一个属性(例如)在px
或pt
中设置了其中一个,那么如果字体大小发生更改,页面将会中断。所以它会违背“使用ems”这个想法来使用本质上不同的单元来实现基本连接的属性。
例如,如果设置了font-size: 1.5em
和line-height: 18px
,则事情将取决于该元素的父级的字体大小,如果该大小比预期的要小得多或者大得多,可能会出错。
无论您使用em
单位或纯数字是一个不同的问题。仅使用一个数字(如line-height: 1.2
)主要等同于使用em
单位,如line-height: 1.2em
中所示。但有一个区别是,当line-height
被继承时,它是继承的纯数字,而不是计算值。
例如,如果内部元素的父级的字体大小是其父级的两倍,则继承值1.2
意味着使用其自身字体大小的1.2倍,这是正确的。但是如果父母有line-height: 1.2em
,那么孩子会继承1.2倍父母字体大小的值 - 这比它自己的字体大小要小得多。
更多的解释最终的例子看line-height @ Mozilla Developer Network
感谢'line-height:1.5em'和'line-height:1.5'之间的区别,它为我节省了很多搜索! – 2014-02-22 16:08:21
line-height
可以px
设置,em
的,每个单位将适合。
line-height
效果最好,面向未来的,如果你使用一个因子/乘数,这意味着没有单位,而只是一个数字,乘以你的字体大小。
.foo {
font-size: 1.3em; /* based that 1em == 10px */
line-height: 1.3; /* 16.9px line-height */
}
所以,是的,你可以,回答你的问题:不,你不应该。
只是基于因子的线高来证明未来。
建议使用的line-height的无量纲数(以防止继承问题)。计算出的行高将是无单位值乘以元素字体大小的乘积。
可能更方便的使用font
CSS快捷方式,像这样(来自Mozilla的CSS文档所采取的示例):
div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }
为什么该无量纲值是优选的,这里给出一个很好的例子:Prefer unitless numbers for line-height values 。
- 1. 绘图曲线ROC em R
- 2. 固定EM的宽度和高度
- 3. ExtJS的 - <em>ID</em>,<em>名</em>,<em>文本</em> - 网格
- 4. 获取指数在我<em>Startup.cs</em>文件从路线
- 5. 阵营:一个<em>对象</em>内的<em>对象</em>内嵌套的道具
- 6. PHP:通过<em>WordPress的</em>><em>Appreances</em>><em>主题选项</em>替换为“空间”
- 7. Sitecore的 - <em>作者</em>,<em>审稿</em>,<em>出版商</em> - 为用户
- 8. 的Mozilla 3.0.8和Chrome高度EM错误解决
- 9. 如何在Silverlight中查找字体的em高度?
- 10. %高度的线高度
- 11. em-mongo的例子?
- 12. Ruby的正则表达式的星号/下划线强/ em?
- 13. Sass add%and em
- 14. Python Multiprocessing/EM
- 15. RabbitMQ和em-websocket
- 16. Rails push EM-Socket
- 17. Youtube SimpleXMLElement prob!em
- 18. jquery animate em
- 19. 混合高斯(EM)如何计算责任
- 20. Firefox的线高度
- 21. 想要EM-Synchrony,em-http-request和fiber之间的关系?
- 22. 高单线图?
- 23. 线高度
- 24. 高级路线
- 25. 印刷术:关于EM的
- 26. 使用jQuery的CSS()和EM
- 27. em单位的相关性?
- 28. 与EM-的WebSocket或巨人
- 29. EM :: Iterator的工作示例
- 30. 线高意外导致高度更高
是的,你可以。 'em'是CSS'line-height'属性的有效单位 – Raptor 2013-02-28 10:07:16
是的,你应该。 – slamborne 2013-02-28 10:09:04
接受的答案指出为什么一个人不应该使用具有行高的任何单位:因为行高然后只计算一次并且结果被继承。要使用字体大小调整行高,请移除单位。 – korkman 2013-10-24 15:36:11