font-size:12px/20px 是什么意思,font-size中有两个数字带有斜杠的意义

学习笔记 马富天 2017-09-01 10:15:59 120 0

【摘要】今天翻阅了一下曾经写过的代码,里面有这个一句:font:12px/20px,我也纳闷了,这是什么意思呢,然后我就自己做了测试,才发现 font 属性值中第一个数指的是大小,第二个数指的是行高。

在 font 或者 font-size 的属性值中可能会有两个参数,使用斜杠分割开的:font:12px/20px

其中 12px 指的是字体的大小(单位是像素)

20px 指的是字体的高度,(单位是像素),但是并不完全等同于 line-height !!!

最后需要注意的是:这种用法只有在 pre 标签里使用才有效:

  1. <pre>
  2.     <div style="font:12px/30px;border:1px solid red;">字体大小12像素,行高30像素</div>
  3.     <div style="font:12px/30px;border:1px solid red;">字体大小12像素,行高30像素</div>
  4. </pre>
  5. <div style="font:12px/30px;border:1px solid red;">字体大小12像素,行高30像素</div>
  6. <div style="font:12px/30px;border:1px solid red;">字体大小12像素,行高30像素</div>

执行的结果如图所示:

请输入图片名称

由图可知,font:12px/20px 这种用法只有在 pre 标签之内使用才能够生效。

版权归 马富天PHP博客 所有

本文标题:《font-size:12px/20px 是什么意思,font-size中有两个数字带有斜杠的意义》

本文链接地址:http://www.mafutian.net/316.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

1

0

上一篇《 如何使用 js 来判断网址的入口来源,判断访客进入的原来页面 》 下一篇《 使用 target="blank" 设置页面中的所有链接只在一个新窗口中打开 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多