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

相关推荐
han_2 分钟前
前端高频面试题之Vue-router篇
前端·vue.js·面试
C.果栗子8 分钟前
Blob格式的PDF文件调用打印,浏览器文件打印(兼容)
前端·javascript·pdf
倚肆2 小时前
CSS 选择器空格使用区别详解
前端·css
盼哥PyAI实验室2 小时前
学会给网页穿衣服——学习 CSS 语言
前端·css·学习
我的xiaodoujiao2 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 25--数据驱动--参数化处理 Excel 文件 2
前端·python·学习·测试工具·ui·pytest
岁月宁静3 小时前
从0到1:智能汇 AI 全栈实战,拆解多模态 AI 应用开发全流程
前端·vue.js·node.js
廾匸6403 小时前
语义化标签
前端·javascript·html
烛阴3 小时前
隐式vs显式:解密C#类型转换的底层逻辑
前端·c#
Fantasydg3 小时前
AJAX JSON学习
前端·学习·ajax
瓢儿菜20183 小时前
Web开发:什么是 HTTP 状态码?
前端·网络协议·http