欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > 【前端基础】7、CSS的字体属性(font相关)

【前端基础】7、CSS的字体属性(font相关)

2025/5/13 5:57:41 来源:https://blog.csdn.net/qq_42659468/article/details/147775893  浏览:    关键词:【前端基础】7、CSS的字体属性(font相关)

一、font-size:设置字体大小

设置方法:

  1. 具体数值+单位
    例如:100px
    也可以用em为单位:1em代表100%2em代表200%……0.5em代表50%
    px方式:
    在这里插入图片描述
    em方式:
    在这里插入图片描述
    但是设置em的时候具体是多大呢?
    在这里插入图片描述
    为什么就偏偏是1em = 14px?而不是别的值?
    因为来自浏览器,但是又不绝对,因为会继承父元素的字体大小从而计算。
    在这里插入图片描述
  2. 百分比
    基于父元素的font-size计算,比如50%表示:等于父元素的font-size的一半。
    在这里插入图片描述
    相对父元素(根据父元素的字体大小计算出来的)
    在这里插入图片描述

二、font-family:设置字体

注意:
这个一般就给<body>元素设置一次(因为继承关系)。
在这里插入图片描述
在这里插入图片描述

三、font-weight:设置字体粗细在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意:
strongbh1~h6等标签的font-weight默认值:bold

三、font-style:设置字体常规、斜体显示

在这里插入图片描述
在这里插入图片描述

四、font-variant:设置小写字母的显示形式

在这里插入图片描述
在这里插入图片描述

五、line-height:设置文本行高

在这里插入图片描述

注意:这几个黑线高度是一致的。

在这里插入图片描述
在这里插入图片描述

如果文本在div中,你想让文本中间位置显示。
那么设置行高 = 这个div的高度就行了。
因为文本内容一定会显示在行高的中间位置。

六、font缩写

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个数字的含义:line-height的值是前面14px1.5倍。
在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词