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

【前端基础】7、CSS的字体属性（font相关）

news 来源：原创 2025/8/18 9:13:12

一、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：设置字体粗细在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意：
strong、b、h1~h6等标签的font-weight默认值：bold

三、font-style：设置字体常规、斜体显示

在这里插入图片描述
在这里插入图片描述

四、font-variant：设置小写字母的显示形式

在这里插入图片描述
在这里插入图片描述

五、line-height：设置文本行高

在这里插入图片描述

注意：这几个黑线高度是一致的。

在这里插入图片描述
在这里插入图片描述

如果文本在div中，你想让文本中间位置显示。
那么设置行高 = 这个div的高度就行了。
因为文本内容一定会显示在行高的中间位置。

六、font缩写

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个数字的含义：line-height的值是前面14px的1.5倍。
在这里插入图片描述

相关文章：

【前端基础】7、CSS的字体属性（font相关）

一、font-size&#xff1a;设置字体大小 设置方法&#xff1a; 具体数值单位 例如&#xff1a;100px 也可以用em为单位&#xff1a;1em代表100%&#xff0c;2em代表200%……0.5em代表50%。 px方式&#xff1a; em方式&#xff1a; 但是设置em的时候具体是多大呢&#xff1f…...

编程日记 2025/8/18 9:13:12

学习整理使用php将SimpleXMLElement 对象解析成数组格式的方法

学习整理使用php将SimpleXMLElement 对象解析成数组格式的方法 要将 SimpleXMLElement 对象解析成数组格式&#xff0c;您可以使用 PHP 的 json_decode 和 json_encode 函数。首先&#xff0c;将 SimpleXMLElement 对象转换为 JSON 字符串&#xff0c;然后将这个字符串解码成数…...

编程日记 2025/8/17 9:11:21

MSF（3）免杀混淆

声明&#xff01;本文章所有的工具分享仅仅只是供大家学习交流为主&#xff0c;切勿用于非法用途&#xff0c;如有任何触犯法律的行为&#xff0c;均与本人及团队无关&#xff01;&#xff01;&#xff01; 一、前言 前面说了木马的捆绑&#xff0c;dll,exe&#xff0c;hta等密…...

编程日记 2025/8/18 1:32:16

经典密码学算法实现

# AES-128 加密算法的规范实现&#xff08;不使用外部库&#xff09; # ECB模式S_BOX [0x63, 0x7C, 0x77, 0x7B, 0xF2, 0x6B, 0x6F, 0xC5, 0x30, 0x01, 0x67, 0x2B,0xFE, 0xD7, 0xAB, 0x76, 0xCA, 0x82, 0xC9, 0x7D, 0xFA, 0x59, 0x47, 0xF0,0xAD, 0xD4, 0xA2, 0xAF, 0x9C, 0x…...

编程日记 2025/8/18 10:02:26

idea里maven自定义的setting.xml文件不生效问题

问题描述&#xff1a; 内网环境中&#xff1a;maven选择选择自定义的maven文件夹时&#xff0c;使用的是自定义的setting.xml和本地仓库&#xff0c;怎么都读取不到仓库的依赖&#xff1b; 分析&#xff1a; 1.可能是setting.xml文件里没有配置本地仓库的路径&#xff1b; 2…...

编程日记 2025/8/18 3:37:32

注意力机制（Attention）

1. 注意力认知和应用 AM&#xff1a; Attention Mechanism&#xff0c;注意力机制。 根据眼球注视的方向&#xff0c;采集显著特征部位数据&#xff1a; 注意力示意图&#xff1a; 注意力机制是一种让模型根据任务需求动态地关注输入数据中重要部分的机制。通过注意力机制&…...

编程日记 2025/8/17 8:28:55

【java】使用iText实现pdf文件增加水印功能

maven依赖 <dependencies><dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>7.2.5</version><type>pom</type></dependency> </dependencies>实现代码 前…...

编程日记 2025/8/18 10:02:24

TextIn ParseX重磅功能更新：支持切换公式输出形式、表格解析优化、新增电子档PDF去印章

ParseX重要版本更新内容速读 - 新增公式解析参数 formula_level&#xff0c;支持 LaTeX / Text 灵活切换&#xff1b; - 表格解析优化单元格内换行输出&#xff1b; - 导出excel时&#xff0c;图片链接放在单元格内&#xff1b; - 新增电子档pdf去印章功能。 体验文档解析…...

编程日记 2025/8/17 8:52:29

禁止idea联网自动更新通过防火墙方式

防火墙方式禁止idea更新检测&#xff0c;解决idea无限循环触发密钥填充流程。 1.首先打开控制面板找到高级设置 2.点击出站规则 3.新建规则 4.选择程序 5.找到idea路径 6.下一步 7.阻止连接 8.全选 9.输入禁止idea的名称 10.至此idea自动更新禁用完成...

编程日记 2025/8/18 10:02:53

面向智能体开发的声明式语言：可行性分析与未来图景

面向智能体开发的声明式语言&#xff1a;可行性分析与未来图景 一、技术演进的必然性&#xff1a;从“脚本化AI”到“声明式智能体” 当前AI开发仍停留在“脚本化AI”阶段&#xff1a;开发者通过Python/Java编写条件判断调用LLM API&#xff0c;如同用汇编语言编写操作系统。…...

编程日记 2025/8/18 10:02:27

【Bug经验分享】SourceTree用户设置必须被修复/SSH 主机密钥未缓存（踩坑）

文章目录 配置错误问题原因配置错误问题解决主机密钥缓存问题原因主机密钥缓存问题解决 更多相关内容可查看 配置错误问题原因 电脑太卡&#xff0c;曾多次强制关机&#xff0c;在关机前没有关闭SourceTree&#xff0c;导致配置错误等问题 配置错误问题解决 方式一&#xff…...

编程日记 2025/8/18 10:02:25

http Status 400 - Bbad request 网站网页经常报 HTTP 400 错误，清缓存后就好了的原因

目录 一、HTTP 400 错误的常见成因（一）问题 URL（二）缓存与 Cookie 异常（三）请求头信息错误（四）请求体数据格式不正确（五）文件尺寸超标（六）请求方法不当二、清缓存为何能奏效三、其他可以尝试的解决办法（一）重新检查 URL（二）暂时关闭浏览器插件（三）切换网络环…...

编程日记 2025/8/16 21:20:55

六个仓库合并为一个仓库，保留master和develop分支的bat脚本

利用git subtree可以实现多个仓库合并为一个仓库&#xff0c;手动操作起来太麻烦了&#xff0c;今天花了点时间写了一个可执行的脚本&#xff0c;现在操作起来就方便多了。 1、本地新建setup.bat文件 2、用编辑器打开&#xff08;我用的是Notepad&#xff09; 3、把下面代码…...

编程日记 2025/8/16 21:20:54

新能源汽车中的NVM计时与RTC计时：区别与应用详解

在新能源汽车的电子控制系统中&#xff0c;时间管理至关重要&#xff0c;而NVM计时&#xff08;Non-Volatile Memory Timing&#xff09;和RTC计时&#xff08;Real-Time Clock&#xff09;是两种不同的时间记录机制。虽然它们都与时间相关&#xff0c;但在工作原理、应用场景和…...

编程日记 2025/8/16 21:20:52

✨WordToCard使用分享✨

家人们&#xff0c;今天发现了一个超好用的工具——WordToCard&#xff01;&#x1f61c; 它可以把WordToCard文档转换成漂亮的知识卡片&#xff0c;学习笔记、知识整理和内容分享都变得超轻松&#xff5e;&#x1f917; 支持各种WordToCard语法&#xff0c;像标题、列表、代…...

编程日记 2025/8/18 10:02:26

内网和外网怎么互通？外网访问内网的几种简单方式

在企业或家庭网络中&#xff0c;经常会遇到不同内网环境下网络互通问题。例如&#xff0c;当公司本地局域网内有个办公OA网站&#xff0c;在办公室内电脑上网可以登录使用&#xff0c;但在家带宽下就无法直接通信访问到。这就需要我们采取一些实用的内外网互通技巧来解决这个问…...

编程日记 2025/8/16 21:20:48

Mac中Docker下载与安装

目录 Docker下载安装配置 版本查询以及问题处理配置国内镜像在Docker中安装软件Nginx Docker 下载 官网&#xff1a;https://www.docker.com/get-started/ 或者 安装 配置 这里我们选择 Accept 选择默认配置就行&#xff0c;Docker 会自动设置一些大多数开发人员必要的配…...

编程日记 2025/8/16 21:20:47

固件测试：mac串口工具推荐

串口工具对固件测试来说非常重要&#xff0c;因为需要经常看日志&#xff0c;Windows上有Xshell和secureCRT&#xff0c;用起来很方便&#xff0c;尤其可以保存日志&#xff0c;并且可以进行日志分割。 mac上用什么串口工具呢&#xff0c;今天给大家推荐CoolTerm。 CoolTerm …...

编程日记 2025/8/16 21:20:44

41.防静电的系列措施

静电干扰的处理措施 1. ESD放电特征2. 静电防护电路设计措施3. ESD防护结构措施4. 案例分析 1. ESD放电特征 &#xff08;1&#xff09;放电电流tr≈1nS&#xff0c;ESD保护器件响应时间应小于1nS&#xff1b; &#xff08;2&#xff09;频率集中在几十MHz到500MHz&#xff1b;…...

编程日记 2025/8/16 21:20:42

Jmeter进行http接口测试

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、jmeter-http接口测试脚本 jmeter进行http接口测试的主要步骤&#xff08;1.添加线程组 2.添加http请求 3.在http请求中写入接口的URL&#xff0c;路径&#x…...

编程日记 2025/8/18 10:02:24

Ubuntu也开始锈化了？Ubuntu 计划在 25.10 版本开始引入 Rust Coreutils

上个月&#xff0c;jnsgruk发表了《未来20年的Ubuntu工程》&#xff08;Engineering Ubuntu For the Next 20 Years&#xff09;一文&#xff0c;其中概述了打算在未来几年中如何发展Ubuntu的四个关键主题。在这篇文章中&#xff0c;重点讨论 了“现代化”。在很多方面对Ubuntu…...

编程日记 2025/8/18 10:02:53

C++命名空间、内联与捕获

命名空间namespace 最常见的命名空间是std，你一定非常熟悉，也就是： using namespace std;命名空间的基本格式 注意，要在头文件里面定义！ namespace namespace_name{data_type function_name(data_type parameter){data_type result;//function contentreturn result;}…...

编程日记 2025/8/16 21:20:36

PostgreSQL 系统管理函数详解

PostgreSQL 系统管理函数详解 PostgreSQL 提供了一系列强大的系统管理函数&#xff0c;用于数据库维护、监控和配置。这些函数可分为多个类别&#xff0c;以下是主要功能的详细说明&#xff1a; 一、数据库配置函数 1. 参数管理函数 -- 查看所有配置参数 SELECT name, sett…...

编程日记 2025/8/18 3:37:38

mdadm 报错: buffer overflow detected

最近跑 blktest (https://github.com/osandov/blktests) 时发现 md/001 的测试失败了 单独执行&#xff0c;最后定位到是 mdadm 命令报错: buffer overflow detected 这个 bug 目前已经修复: https://git.kernel.org/pub/scm/utils/mdadm/mdadm.git/commit/?id827e1870f3205…...

编程日记 2025/8/16 21:20:32

java ReentrantLock

线程同步工具。可以替代 synchronized . private final ReentrantLock reentrantLock new ReentrantLock();void testTask1 () {reentrantLock.lock(); // 获取锁try {System.out.println(Thread.currentThread().getName() " 进入临界区");// 模拟执行业务逻辑Th…...

编程日记 2025/8/16 21:20:31

kettle从入门到精通 第九十六课 ETL之kettle Elasticsearch 增删改查彻底掌握

场景&#xff1a; 群里有小伙伴咨询kettle从Elasticsearch中抽取数据&#xff0c;群里老师们纷纷响应&#xff0c;vip小伙伴是不是有中受宠若惊的感觉。 今天我们使用kettle通过es的原生rest接口来进行操作es&#xff0c;开整。 前提&#xff1a;本篇文章基于elasticsearch:7.…...

编程日记 2025/8/16 21:20:29

Kafka的核心组件有哪些？简要说明其作用。 （Producer、Consumer、Broker、Topic、Partition、ZooKeeper）

Kafka 核心组件解析 1. 基础架构图解 ┌─────────┐ ┌─────────┐ ┌─────────┐ │Producer │───▶ │ Broker │ ◀─── │Consumer │ └─────────┘ └─────────┘ └────────…...

编程日记 2025/8/18 6:39:18

Missashe考研日记-day34

Missashe考研日记-day34 1 专业课408 学习时间&#xff1a;3h学习内容&#xff1a; 今天是学习I/O管理第二小节的内容&#xff0c;听了课也做了题&#xff0c;这是操作系统倒数第二节知识了&#xff0c;还差最后一节就完结了。知识点回顾&#xff1a; 1.I/O核心子系统&#x…...

编程日记 2025/8/16 21:20:26

机器人跑拉松是商业噱头还是技术进步的必然体现

一、机器人跑拉松是商业噱头还是技术进步的必然体现 机器人参与马拉松赛事究竟是营销噱头还是技术进步的必然要求&#xff0c;需要从技术验证、行业推动、公众认知以及争议焦点等多个维度综合分析。基于全球首场人形机器人半程马拉松&#xff08;2025年北京亦庄赛事&#xff0…...

编程日记 2025/8/16 21:20:24

传输层协议 1.TCP 2.UDP

传输层协议 1.TCP 2.UDP TCP协议 回顾内容 传输层功能&#xff1a;定义应用层协议数据报文的端口号&#xff0c;流量控制对原始数据进行分段处理 传输层所提供服务 传输连接服务数据传输服务&#xff1a;流量控制、差错控制、序列控制 一、传输层的TCP协议 1.面向连接的…...

编程日记 2025/8/16 21:20:23

LLM ：Function Call、MCP协议与A2A协议

LLM 的函数调用、模型上下文协议 (MCP) 和 Agent to Agent (A2A) 协议&#xff1a;概念、区别与实例对比 引言&#xff1a;LLM 不断演进的格局 大型语言模型 (LLM) 的日益精进&#xff0c;使其能力已超越简单的文本生成&#xff0c;迈向与现实世界进行复杂交互的新阶段。为了…...

编程日记 2025/8/16 21:20:21

当当狸智能天文望远镜 TW2 | 用科技触摸星辰，让探索触手可及

当科技邂逅星空&#xff0c;每个普通人都能成为宇宙的追光者 伽利略用望远镜揭开宇宙面纱的 400 年后&#xff0c;当当狸以颠覆传统的设计&#xff0c;让天文观测从专业领域走入千家万户。当当狸智能天文望远镜 TW2&#xff0c;重新定义「观星自由」—— 无需专业知识&#xff…...

编程日记 2025/8/16 17:33:23

白杨SEO：如何查看百度、抖音、微信、微博、小红书、知乎、B站、视频号、快手等7天内最热门话题及流量关键词有哪些？使用方法和免费工具推荐以及注意事项【干货】

大家好&#xff0c;我是白杨SEO&#xff0c;专注SEO十年以上&#xff0c;全网SEO流量实战派&#xff0c;AI搜索优化研究者。 &#xff08;温馨提醒&#xff1a;本文有点长&#xff0c;看不完建议先收藏或星标&#xff0c;后面慢慢看哈&#xff09; 最近&#xff0c;不管是在白…...

编程日记 2025/8/16 22:51:37

Spring AI 之 AI核心概念

模型 人工智能（AI）模型是用于处理和生成信息的算法，通常旨在模拟人类的认知功能。这些模型通过从大规模数据集中学习模式和规律，能够生成预测结果、文本、图像或其他形式的输出，从而增强各行业应用的效能。 AI 模型种类繁多，每种模型都适用于特定的应用场景。虽然以 Ch…...

编程日记 2025/8/16 21:20:19

微软输入法常用快捷键介绍以及调教技巧

微软输入法&#xff08;Microsoft Pinyin Input Method&#xff09;是 Windows 系统内置的中文输入工具&#xff0c;以其高效、智能化的特点广受用户喜爱。掌握其常用快捷键和特殊模式可以显著提升输入效率。本文将介绍微软输入法在 Windows 10/11 环境下的常用快捷键及 U 模式…...

编程日记 2025/8/16 21:20:17

基于大模型的输卵管妊娠全流程预测与治疗方案研究报告

一、引言 1.1 研究背景与意义 输卵管妊娠作为异位妊娠中最为常见的类型，严重威胁着女性的生殖健康和生命安全。受精卵在输卵管内着床发育，随着胚胎的生长，输卵管无法提供足够的空间和营养支持，极易引发输卵管破裂、大出血等严重并发症，若救治不及时，甚至会导致孕产妇死…...

编程日记 2025/8/16 21:20:16

16.Excel：打印技巧

一 区域打印 不用打印整个表格&#xff0c;比如只想打印框选出来的信息。 选中区域调整列宽。 二 整表打印 选中整个工作表&#xff0c; 如果调完边距后仍然打印不完全&#xff0c;就用缩放功能。 三 居中打印 打印部分区域的时候&#xff0c;预览图不在居中。 四 行号打印 五 …...

编程日记 2025/8/16 13:40:59

AI驱动的Kubernetes管理：kubectl-ai 如何简化你的云原生运维

AI驱动的Kubernetes管理&#xff1a;kubectl-ai 如何简化你的云原生运维 kubectl-ai 项目概览核心能力&#xff1a;AI 如何赋能 kubectl自然语言的魔力&#xff1a;从繁琐命令到简单对话智能的命令生成与执行不仅仅是执行&#xff1a;结果的可解释性广泛的 AI 模型支持&#xf…...

编程日记 2025/8/16 21:20:14

maven基本介绍

Maven是一个常用的项目构建工具&#xff0c;用于管理Java项目的构建、依赖管理和项目信息管理。它可以帮助开发人员自动化构建过程&#xff0c;统一项目结构和构建规范&#xff0c;并管理项目所需的外部依赖库。 Maven通过一个项目对象模型&#xff08;Project Object Model&a…...

编程日记 2025/8/16 21:20:12

SPL量化 BBIC（多空指标）

BBIC 是一种将不同天数移动平均线加权平均之后的综合指标&#xff0c;属于均线型指标&#xff0c;一般选用 3 日、6 日、12 日、24 日等 4 条平均线。BBIC 越小股价越强势&#xff0c;BBIC < 1 为多头行情&#xff0c; BBIC>1 为空头行情。 计算公式&#xff1a; 1. 3 日…...

编程日记 2025/8/16 21:20:11

【ArcGIS Pro微课1000例】0068：Pro原来可以制作演示文稿（PPT）

文章目录 一、新建演示文稿二、插入页面1. 插入地图2. 插入空白文档3. 插入图像4. 插入视频三、播放与保存一、新建演示文稿 打开软件，新建一个地图文档，再点击【新建演示文稿】： 创建的演示文档会默认保存在目录中的演示文稿文件夹下。 然后可以对文档进行简单的设计，例如…...

编程日记 2025/8/16 12:53:17

【论文阅读】Reconstructive Neuron Pruning for Backdoor Defense

我们的主要贡献包括&#xff1a; 我们引入了在相同样本集上进行神经元“遗忘”和“恢复”的新技术&#xff0c;并揭示了这种简单的基于重构的学习过程可以帮助暴露DNNs中的后门神经元。我们提出了一个新的防御方法——重构神经元剪枝&#xff08;RNP&#xff09;&#xff0c;它…...

编程日记 2025/8/18 3:37:41

[数据处理] 3. 数据集读取

&#x1f44b; 你好&#xff01;这里有实用干货与深度分享✨✨ 若有帮助&#xff0c;欢迎&#xff1a;​ &#x1f44d; 点赞 | ⭐ 收藏 | &#x1f4ac; 评论 | ➕ 关注 &#xff0c;解锁更多精彩&#xff01;​ &#x1f4c1; 收藏专栏即可第一时间获取最新推送&#x1f514;…...

编程日记 2025/8/17 8:27:32

Ceph 原理与集群配置

一、Ceph 工作原理 1.1.为什么学习 Ceph&#xff1f; 在学习了 NFS 存储之后&#xff0c;我们仍然需要学习 Ceph 存储。这主要是因为不同的存储系统适用于不同的场景&#xff0c;NFS 虽然有其适用之处&#xff0c;但也存在一定的局限性。而 Ceph 能够满足现代分布式、大规模、…...

编程日记 2025/8/16 22:51:35

【C++】类和对象

文章目录 1. 为什么引入类&#xff1f;1.1 C类的设计目标1.2 类的核心特性1.3 类与结构体的区别 2. 类的定义2.1 类定义格式2.2 访问限定符2.3 类域 3. 实例化3.1 实例化概念3.2 对象大小 4. this指针5. 类的默认成员函数6. 构造函数7. 析构函数8. 拷贝构造函数9. 赋值运算符重…...

编程日记 2025/8/16 22:51:32

【计算机视觉】OpenCV项目实战：OpenCV_Position 项目深度解析：基于 OpenCV 的相机定位技术

OpenCV_Position 项目深度解析&#xff1a;基于 OpenCV 的相机定位技术 一、项目概述二、技术原理&#xff08;一&#xff09;单应性矩阵&#xff08;Homography&#xff09;&#xff08;二&#xff09;算法步骤&#xff08;三&#xff09;相机内参矩阵 三、项目实战运行&#…...

编程日记 2025/8/16 22:51:30

【Linux系列】如何区分 SSD 和机械硬盘

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2025/8/16 22:51:27

【AI提示词】双系统理论专家

提示说明 专注于认知心理学领域的专家&#xff0c;研究快思考&#xff08;直觉&#xff09;与慢思考&#xff08;理性&#xff09;的切换机制及其在认知科学中的应用。 提示词 # Role: 双系统理论专家## Profile - language: 中文 - description: 专注于认知心理学领域的专家…...

编程日记 2025/8/16 22:51:25

CI/CD与DevOps流程流程简述（给小白运维提供思路）

一 CI/CD流程详解&#xff1a;代码集成、测试与发布部署 引言 在软件开发的世界里&#xff0c;CI/CD&#xff08;持续集成/持续交付&#xff09;就像是一套精密的流水线&#xff0c;确保代码从开发到上线的整个过程高效、稳定。我作为一名资深的软件工程师&#xff0c;接下来…...

编程日记 2025/8/16 22:51:22

python调用国税乐企直连接口开数电票之查询税收分类编码信息

背景 通过国税官方开放乐企平台接口, 实现了在EPR系统内直接开票. 无需通过任何第三方系统.逐步更新到CSDN专栏分享大家参考. 接口说明 定时获取可用税收分类编码&#xff0c;绑定ERP内部的编码, 使开票时能根据商品匹配到对应的税收分类编码…针对不同编码维护了 18 类增值…...

编程日记 2025/8/16 14:38:51