line-height属性与font-size属性的关系

1 篇文章 0 订阅

在CSS样式中,关于文字的line-height属性和font-size属性
在这里插入图片描述
从图中可以看出:
行高=行间距(两倍行半距)+文字大小

文字的大小由font-size属性决定,行高由line-height属性决定。

关于同时使用font-size与line-height属性的3种情况:
1.font-size与line-height的值相同时:
此时的行间距为0

2.当font-size > line-height时:
此时的行间距为负数,即不同行的文字之间会出现重叠现象

3.当font-size < line-height时:
行间距 > 0

例如:
相应代码:
在这里插入图片描述
浏览器中显示的结果:

在这里插入图片描述
注意:id=“num1”中,font-size与line-height我使用的单位是 px,若使用 em的话浏览器的显示结果行间距不为0,这里就要去仔细了解一下单位px与em两者的具体含义、功能和区别以及它们之间的换算了。

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
回答: 在CSS中,可以使用font-family属性来定义文本的字体系列。例如,可以使用以下代码将字体系列设置为"微软雅黑": p { font-family: "微软雅黑"; } 可以使用逗号分隔多个字体系列,以便在某些情况下无法加载指定字体时,可以使用备用字体。例如: div { font-family: Arial, "Microsoft Yahei", "微软雅黑"; } 关于line-height的设置,可以使用具体的数值或者预定义的关键字来定义行高。例如,可以使用以下代码将行高设置为1.5倍字体大小: p { line-height: 1.5; } 也可以使用预定义的关键字,如"normal"表示正常行高,"inherit"表示继承父元素的行高等。 希望以上回答能够解决您的问题。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [CSS字体属性(font-family、font-size、font-weight、font-style)](https://blog.csdn.net/weixin_42579348/article/details/109185395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【文本】HTML5 Canvas设置字型属性(font-style、font-variant、font-weight、font-sizeline-height、font...](https://blog.csdn.net/HuoYiHengYuan/article/details/101677114)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值