当前位置: 首页 > ds >正文

【前端基础】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倍。
在这里插入图片描述

http://www.xdnf.cn/news/4619.html

相关文章:

  • React Router Vs Vue Router
  • AGV智能搬运机器人:富唯智能引领工业物流高效变革
  • DeepSeek架构解析:从神经动力学视角解构万亿参数模型的认知涌现机制
  • 企业该如何选择合适的DDOS防护?
  • C++代码随想录刷题知识分享-----判断两个字符串是否为字母异位词(Anagram)【LeetCode 242】
  • 【论文阅读】Reconstructive Neuron Pruning for Backdoor Defense
  • C++类对象的隐式类型转换和编译器返回值优化
  • idea左侧项目资源管理器不见了处理
  • Python+深度学习:如何精准评估食品过敏风险?
  • 代码随想录Day20
  • Canal mysql to mysql 增加 online 库同步配置指南
  • MATLAB技巧——命令行输入的绘图,中文是正常的,到了脚本(m文件)里面就变成乱码的解决方法
  • 普通笔记本与军用加固笔记本电脑的区别,探索防水、防爆、防摔的真·移动工作站!
  • 2025软考【系统架构设计师】:两周极限冲刺攻略(附知识点解析+答题技巧)
  • java ReentrantLock
  • MySQL的基本操作
  • 《Python星球日记》 第46天:决策树与随机森林
  • 二分查找习题
  • SQL 中的中括号 [ ]、双引号 “ “、反引号 ` `:SQL Server、Oracle、MySQL三大数据库标识符 定界符 详解
  • Xilinx XCKU11P-2FFVA1156I 赛灵思 FPGA AMD Kintex UltraScale+
  • K8S - 金丝雀发布实战 - Argo Rollouts 流量控制解析
  • Python案例实战《鲜花识别模型训练及调用》
  • 使用 Selenium 截图功能,截不到原生 JavaScript 弹窗
  • 【视觉基础模型-SAM系列-2】SAM2: Segment Anything in Images and Videos
  • 【上位机——MFC】对象和控件绑定
  • kettle从入门到精通 第九十六课 ETL之kettle Elasticsearch 增删改查彻底掌握
  • C++GO语言socket套接字
  • Go语言——for循环、包构建以及包冲突
  • 怎样避免住宅IP被平台识别
  • Prompt Engineering 提示词工程学习