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

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

相关文章:

  • 《Python星球日记》 第47天:聚类与KMeans
  • 学习笔记:黑马程序员JavaWeb开发教程(2025.3.30)
  • 项目模拟实现消息队列第二天
  • spring 事务实现原理
  • RabbitMq学习(第一天)
  • C++中的位运算符:与、或、异或详解
  • 阿里云2核2g安装nexus
  • shell脚本--2
  • 如何在大型项目中解决 VsCode 语言服务器崩溃的问题
  • 【shardingsphere分布式主键无效】
  • Kubernetes(k8s)学习笔记(八)--KubeSphere定制化安装
  • C 语言编码规范
  • Selenium使用指南
  • 21. LangChain金融领域:合同审查与风险预警自动化
  • 802.11s Mesh 组网框架流程
  • 排序算法——桶排序
  • 一个电平转换电路导致MCU/FPGA通讯波形失真的原因分析
  • 阿里云codeup以及本地gitclone+http
  • AB测试面试题
  • 年化50.1%,回撤23%|从数据加载,因子分析到lightGBM因子合成,智能策略开发全流程(附python代码下载)
  • 贵州省总工会党组成员、副主席梁伟接受审查调查
  • 黑灰产工作室为境外诈骗集团养号引流,冒充美女与男性裸聊后敲诈勒索
  • 印称一名高级官员在巴基斯坦发动的袭击中死亡
  • 伤员回归新援融入,海港逆转海牛重回争冠集团
  • 欧盟决意与俄罗斯能源彻底决裂之际,美国谋划新生意:进口俄气对欧转售
  • 马上评|让“贾宝玉是长子长孙”争议回归理性讨论