【前端基础】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倍。

相关推荐
掘金安东尼27 分钟前
字节前端三面复盘:基础不花哨,代码要扎实(含高频题解)
前端·面试·github
吃奥特曼的饼干35 分钟前
React useEffect 清理函数:别让依赖数组坑了你!
前端·react.js
烛阴42 分钟前
TypeScript 函数重载入门:让你的函数签名更精确
前端·javascript·typescript
前端老鹰43 分钟前
HTML <meta name="color-scheme">:自动适配系统深色 / 浅色模式
前端·css·html
Keya1 小时前
MacOS端口被占用的解决方法
前端·后端·设计模式
moyu841 小时前
解密Vue组件中的`proxy`:此Proxy非彼Proxy
前端
用户84913717547161 小时前
为什么大模型都离不开SSE?带你搞懂第1章〈SSE技术基础与原理〉
前端·网络协议·llm
随笔记1 小时前
react中函数式组件和类组件有什么区别?新建的react项目用函数式组件还是类组件?
前端·react.js·typescript
在星空下1 小时前
Fastapi-Vue3-Admin
前端·python·fastapi
FogLetter1 小时前
面试官问我Function Call,我这样回答拿到了Offer!
前端·面试·openai