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

相关推荐
代码搬运媛7 小时前
Jest 测试框架详解与实现指南
前端
counterxing7 小时前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq8 小时前
windows下nginx的安装
linux·服务器·前端
之歆8 小时前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜8 小时前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108088 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen10 小时前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm10 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy11 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao11 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端