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

相关推荐
烛阴6 分钟前
Date-fns教程:现代JavaScript日期处理从入门到精通
前端·javascript
全栈小513 分钟前
【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
前端·elementui·typescript·vue3·同步异步
穗余22 分钟前
NodeJS全栈开发面试题讲解——P6安全与鉴权
前端·sql·xss
穗余2 小时前
NodeJS全栈开发面试题讲解——P2Express / Nest 后端开发
前端·node.js
航Hang*2 小时前
WEBSTORM前端 —— 第3章:移动 Web —— 第4节:移动适配-VM
前端·笔记·edge·less·css3·html5·webstorm
江城开朗的豌豆2 小时前
JavaScript篇:a==0 && a==1 居然能成立?揭秘JS中的"魔法"比较
前端·javascript·面试
江城开朗的豌豆2 小时前
JavaScript篇:setTimeout遇上for循环:为什么总是输出5?如何正确输出0-4?
前端·javascript·面试
橘子味的冰淇淋~2 小时前
npm run build 报错:Some chunks are larger than 500 KB after minification
前端·npm·node.js
QING6183 小时前
Gradle 核心配置属性详解 - 新手指南(二)
android·前端·gradle
普通老人3 小时前
【前端】Vue中实现pdf逐页转图片,图片再逐张提取文字
前端·vue.js·pdf