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

CSS 字体学习笔记

news 来源：原创 2025/9/8 16:45:17

在网页设计中，字体的使用对于提升用户体验和页面美观性至关重要。CSS 提供了一系列字体属性，用于控制文本的显示效果。以下是对 CSS 字体属性的详细学习笔记。

一、字体系列（`font-family`）

1. 字体系列的分类

在 CSS 中，字体系列分为两类：

通用字体系列：拥有相似外观的字体系统组合，如 "Serif"、"Sans-serif"、"Monospace" 等。
特定字体系列：一个特定的字体系列，如 "Times New Roman"、"Arial"、"Courier New" 等。

2. 常见字体系列对比

表格

复制

通用字体系列	字体系列	说明
Serif	Times New Roman<br>Georgia	Serif 字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial<br>Verdana	"Sans" 意为无，这些字体在末端没有额外的装饰
Monospace	Courier New<br>Lucida Console	所有的等宽字符具有相同的宽度

3. 设置字体系列

font-family 属性用于设置文本的字体系列。建议设置多个字体名称作为“后备”机制，以防浏览器不支持第一种字体。如果字体系列名称包含多个单词，需要用引号括起来。

示例：

css

复制

p {font-family: "Times New Roman", Times, serif;
}

二、字体样式（`font-style`）

font-style 属性用于指定文本的字体样式，主要有以下三个值：

normal：正常显示文本
italic：以斜体字显示文本
oblique：文字向一边倾斜（与斜体类似，但支持度较低）

示例：

css

复制

p.normal {font-style: normal;
}p.italic {font-style: italic;
}p.oblique {font-style: oblique;
}

三、字体大小（`font-size`）

font-size 属性用于设置文本的大小。字体大小的值可以是绝对大小或相对大小。

1. 绝对大小

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
在确定输出的物理尺寸时非常有用

示例：

css

复制

h1 {font-size: 40px;
}h2 {font-size: 30px;
}p {font-size: 14px;
}

2. 相对大小

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

默认情况下，浏览器中普通文本段落的字体大小是 16 像素（16px = 1em）。

示例：

css

复制

h1 {font-size: 2.5em; /* 40px / 16 = 2.5em */
}h2 {font-size: 1.875em; /* 30px / 16 = 1.875em */
}p {font-size: 0.875em; /* 14px / 16 = 0.875em */
}

3. 使用百分比和 `em` 组合

为了在所有浏览器中实现一致的文本大小调整，可以将 <body> 元素的默认字体大小设置为百分比，然后使用 em 单位设置其他元素的字体大小。

示例：

css

复制

body {font-size: 100%;
}h1 {font-size: 2.5em;
}h2 {font-size: 1.875em;
}p {font-size: 0.875em;
}

四、字体粗细（`font-weight`）

font-weight 属性用于指定字体的粗细。常见的值包括：

normal：正常粗细
bold：加粗
bolder：更粗
lighter：更细
数字（100 到 900）：数字越大，字体越粗

示例：

css

复制

p.normal {font-weight: normal;
}p.bold {font-weight: bold;
}p.bolder {font-weight: bolder;
}p.lighter {font-weight: lighter;
}

五、小型大写字体（`font-variant`）

font-variant 属性用于指定文本是否以小型大写字体显示。主要值包括：

normal：正常字体
small-caps：小型大写字体

示例：

css

复制

p.normal {font-variant: normal;
}p.small-caps {font-variant: small-caps;
}

六、字体简写属性（`font`）

font 属性允许在一个声明中设置所有的字体属性，包括 font-style、font-variant、font-weight、font-size、line-height 和 font-family。

示例：

css

复制

p {font: italic small-caps bold 16px/30px Georgia, serif;
}

CSS 字体学习笔记

在网页设计中，字体的使用对于提升用户体验和页面美观性至关重要。CSS 提供了一系列字体属性，用于控制文本的显示效果。以下是对 CSS 字体属性的详细学习笔记。一、字体系列（font-family） 1. 字体系列的分类在 CSS 中&#xf…...

编程日记 2025/9/8 16:45:17

通过 spring ai 对接 deepseek ai 大模型通过向量数据库，完成 AI 写标书及构建知识库功能的设计与开发

编程日记 2025/9/8 16:39:15

cropperjs 2.0裁剪图片后转base64提示“Tainted canvases may not be exported”跨域问题的解决办法。

目录为什么会有这边文章辛酸历程，不看也罢想解决问题，看这里就够了问题已解决，后边还是废话为什么会有这边文章最近，做一个项目需要用在前端实现图片裁剪功能，毋庸置疑，cropperjs是不二选择。当在…...

编程日记 2025/9/8 16:44:47

2、JSX：魔法世界的通行证——用魔法符号编织动态界面

一、开篇：魔法符号的觉醒 "看呐，赫敏！这根魔杖（React组件）为何能自动绘制出动态界面？"年轻的巫师学徒罗恩指着闪烁的屏幕惊呼。 "这就是JSX魔法阵的威力，"邓布利多校长挥舞…...

编程日记 2025/9/8 16:42:03

八大排序算法

目录八大排序算法排序算法的稳定性比较排序插入排序直接插入排序希尔排序希尔排序的时间复杂度计算选择排序直接选择排序堆排序交换排序冒泡排序快速排序递归hoare版本挖坑法lomuto前后指针非递归归并排序排序性能对比非比较排序计数排序比较排序算法总结八大排序算法 …...

编程日记 2025/9/8 16:44:44

搭建一个Spring Boot聚合项目

1. 创建父项目打开IntelliJ IDEA，选择 New Project。在创建向导中选择 Maven，确保选中 Create from archetype，选择 org.apache.maven.archetypes:maven-archetype-quickstart。填写项目信息： GroupId：com.exampl…...

编程日记 2025/9/3 21:17:07

Google A2A协议解析：构建分布式异构多Agent系统

一、A2A 是什么？有什么用？ 1.1 A2A 是什么？ A2A（Agent-to-Agent Protocol）是Google最新推出的一项开源协议，旨在为AI智能体（Agents）提供标准化的通信方式。它允许不同框架&#xf…...

编程日记 2025/9/5 14:26:01

【Android读书笔记】读书笔记记录

文章目录一. Android开发艺术探索1. Activity的生命周期和启动模式1.1 生命周期全面分析一. Android开发艺术探索 1. Activity的生命周期和启动模式 1.1 生命周期全面分析 onPause和onStop onPause后会快速调用onStop，极端条件下直接调用onResume 当用户打开新…...

编程日记 2025/9/8 16:44:46

支持selenium的chrome driver更新到135.0.7049.84

最近chrome释放新版本：135.0.7049.84 如果运行selenium自动化测试出现以下问题，是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only su…...

编程日记 2025/9/4 17:39:27

【玩泰山派】MISC（杂项）- 使用vscode远程连接泰山派进行开发

文章目录前言流程1、安装、启动sshd2、配置一下允许root登录3、vscode中配置1、安装remote插件2、登录 **注意** 前言有时候要在开发板中写一写代码，直接在终端中使用vim这种工具有时候也不是很方便。这里准备使用vscode去通过ssh远程连接泰山派去操作&#xff0…...

编程日记 2025/9/8 16:38:37

利用阿里云企业邮箱服务实现Python群发邮件

目录一、阿里云企业邮箱群发邮件全流程实现 1. 准备工作与环境配置 2. 收件人列表管理 3. 邮件内容构建 4. 附件添加实现 5. 邮件发送核心逻辑二、开发过程中遇到的问题与解决方案 1. 附件发送失败问题 2. 中文文件名乱码问题 3. 企业邮箱认证失败三、完整工作流…...

编程日记 2025/9/8 16:42:02

中文编码，GB系列，UTF

图片来源：https://zhuanlan.zhihu.com/p/701690894 文章目录 ASCIIGB系列编码UTF编码 ASCII American Standard Code for Information Interchange 一个字节，但其实只用了一半： 128个字符 GB系列编码 “国标” 和ASCII是兼容的。 GB2312…...

编程日记 2025/9/8 16:41:35

车载以太网-TLS

文章目录车载以太网与TLS的技术背景核心定位车载以太网TLS的技术架构车载TLS的核心安全机制TLS报文结构详解TLS工作机制密钥交换与计算流程标题完整握手流程（1-RTT）数据传输加密流程车载TLS的独特优化策略车载TLS的安全威胁相关标准车载以太网TLS（Transport Layer Security…...

编程日记 2025/9/8 16:38:37

【大英赛】大英赛准备笔记

听力总结提醒专注一题一个听力时，听是重点抓紧时间往后审题比较容易的部分：secA & secD中的dictation，在大致审当前的基础上，分别利用这个时间提前看后面的secB√& summery secA 听之前应当大致审选项&#x…...

编程日记 2025/9/5 17:49:32

有序数组的平方

暴力排序每个数平方以后排个序 class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int slow0,fast0;int nnums.size();while(fast<n){nums[slow]nums[fast]*nums[fast];fast;slow;}sort(nums.begin(),nums.end());return nums;} }…...

编程日记 2025/9/7 21:31:50

Python基于Django的房屋信息可视化及价格预测系统（附源码，文档说明）

博主介绍：✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…...

编程日记 2025/9/8 16:44:46

【5G-A学习】ISAC通信感知一体化学习小记

通信感知一体化（Integrated Sensing and Communication, ISAC）是一种将无线通信与环境感知功能深度融合的技术，通过共享硬件、频谱和信号处理流程，实现通信与感知的协同增效。其核心原理及无人机与飞鸟的识别方式如下：…...

编程日记 2025/9/8 16:45:16

深入解析@Validated注解：Spring 验证机制的核心工具

一、注解出处与核心定位 1. 注解来源 • 所属框架：Validated 是 Spring Framework 提供的注解（org.springframework.validation.annotation 包下）。 • 核心定位： 作为 Spring 对 JSR-380（Bean Validation 2.0&#…...

编程日记 2025/9/8 16:39:16

学生考勤管理系统（jsp+ssh+mysql5.x）含文档

学生考勤管理系统（jspsshmysql5.x）含万字详细文档学生考勤管理系统是一个用于管理学生出勤和请假的系统，系统登录页面提供账号和密码输入框，用户可以选择角色进行登录。系统主菜单包括班级管理、用户管理、课程表管理和考勤情况…...

编程日记 2025/9/3 19:26:16

【响应式编程】Reactor 常用操作符与使用指南

文章目录一、创建操作符1. just —— 创建包含指定元素的流2. fromIterable —— 从集合创建 Flux3. empty —— 创建空的 Flux 或 Mono4. fromArray —— 从数组创建 Flux5. fromStream —— 从 Java 8 Stream 创建 Flux6. create —— 使用 FluxSink 手动发射元素7. generat…...

编程日记 2025/9/3 6:20:10

为什么我们需要if name == main:

[目录] 0.前言 1.什么是 __name__？ 2.if __name__ __main__: 的作用 3.为何Windows更需if __name__ ？前言 if __name__ __main__: 是 Python 中一个非常重要的惯用法，尤其在使用 multiprocessing 模块或编写可导入的模块时。它的作用是区分…...

编程日记 2025/8/29 2:57:49

Week 1: Time Complexity, Rectangle Geometry

问题集 Square PastureBucket BrigadeBlocked BillboardBlocked Billboard IIWord ProcessorDo You Know Your ABCs?The Cow-SignalD3C - White Sheet 视频解析 Square Pasture Bucket Brigade Blocked Billboard Blocked Billboard II Word Processor Do You Know Your AB…...

编程日记 2025/9/3 8:58:09

论文学习：《通过基于元学习的图变换探索冷启动场景下的药物-靶标相互作用预测》

原文标题：Exploring drug-target interaction prediction on cold-start scenarios via meta-learning-based graph transformer 原文链接：https://www.sciencedirect.com/science/article/pii/S1046202324002470 药物-靶点相互作用（DTI&…...

编程日记 2025/9/7 14:49:31

STM32 HAL库 OLED驱动实现

一、概述 1.1 OLED 显示屏简介 OLED（Organic Light - Emitting Diode）即有机发光二极管，与传统的 LCD 显示屏相比，OLED 具有自发光、视角广、响应速度快、对比度高、功耗低等优点。在嵌入式系统中，OLED 显示屏常被用…...

编程日记 2025/9/4 21:37:20

UE5蓝图之间的通信------接口

一、创建蓝图接口二、双击创建的蓝图接口，添加函数，并重命名新函数。三、在一个蓝图（如玩家角色蓝图）中实现接口，如下图： 步骤一：点击类设置步骤二：在细节面板已经实现的接口中…...

编程日记 2025/9/3 7:58:14

封装Tcp Socket

封装Tcp Socket 0. 前言1. Socket.hpp2. 简单的使用介绍 0. 前言本文中用到的Log.hpp在笔者的历史文章中都有涉及，这里就不再粘贴源码了，学习地址如下：https://blog.csdn.net/weixin_73870552/article/details/145434855?spm1001.2014.3001…...

编程日记 2025/9/2 16:13:43

深入解析 Android 图形系统：Canvas、Skia、OpenGL 与 SurfaceFlinger 的协作

在 Android 应用开发中，流畅的 UI 渲染是用户体验的核心。但你是否好奇，一个简单的 View 是如何从代码中的 onDraw() 方法一步步变成屏幕上的像素的？本文将从底层图形系统的视角，解析 Android 中 Canvas、Skia、OpenGL ES 和 Surf…...

编程日记 2025/9/5 13:14:47

LeetCode每日一题4.13

1922. 统计好数字的数目问题问题分析题目要求我们找到长度为 n 且满足特定条件（偶数下标处为偶数，奇数下标处为质数）的数字字符串的总数，并对 (10^9 7) 取余。思路 1.枚举生成所有可能的数字字符串：对于长度…...

编程日记 2025/9/7 4:34:24

Java学习——day29（并发控制高级工具与设计模式）

文章目录 1. 并发控制高级工具简介1.1 CountDownLatch1.2 CyclicBarrier1.3 Semaphore1.4 并发设计模式 2. 扩展生产者—消费者示例2.1 示例代码 3. 代码详解3.1 主类 ExtendedProducerConsumerDemo3.2 Buffer 类3.3 Producer 类3.4 Consumer 类 4. 编译与运行结果4.1 编译4.2 …...

编程日记 2025/9/5 8:56:07

使用FormData格式上传图片

为什么要使用FormData格式上传图片 1. 为什么使用 FormData？ FormData 是一种专门用于构建表单数据的对象，它能够以 multipart/form-data 格式发送数据，这是文件上传的标准格式。以下是使用 FormData 的主要原因： 简单易用直…...

编程日记 2025/9/2 11:00:51

Tkinter表格与列表框应用

在图形用户界面（GUI）开发中，表格和列表框是常用的控件，用于显示和管理大量的数据。Tkinter提供了Listbox控件来显示简单的列表数据，而对于更复杂的表格数据，可以使用Treeview控件（属于ttk模块）来实现。这一章将介绍如何使用Listbox和Treeview来显示和操作数据，帮助您处…...

编程日记 2025/9/5 22:21:47

【Excel】数据透视表月度数据排序不正确

【问题】插入数据透视表后，月度列显示的日期，是按照文本格式排序的，显然与实际月份排序并不相符。【目的】按照从1月份到12月份进行自然月度排序。【方法】步骤一： 在任意一处，输入“1月”-“12月”&#…...

编程日记 2025/9/7 1:23:44

HCIP第十天

OSPF的数据包 OSPF是跨层封装协议，直接封装在网络层之上 --- 需要IP协议使用一个协议号来标定 OSPF --- 89 OSPF的头部版本 --- OSPF的版本 --- 2 类型 --- OSPF数据包的类型 --- hello -- 1 DBD -- 2 LSR -- 3 LSU -- 4 LSACK -- 5 路由器ID --- RID --- 携带的是发出O…...

编程日记 2025/9/3 11:20:33

Vue2，Vue3知识大全

Vue 1.了解vue,快速上手 vue是一个用于构建用户的界面的渐进式框架. vue的两种使用方法: vue核心包开发场景:局部模块改造 vue核心包&vue插件工程化开发场景:整站开发 1.创建一个vue实例: 2.插值表达式 1.插值表达式是一种Vue的模版语法作用:利用表达式进行插值…...

编程日记 2025/9/2 23:01:51

java面向对象02：回顾方法

回顾方法及加深定义方法修饰符返回类型 break：跳出switch和return的区别方法名参数列表 package com.oop.demo01;//Demo01类 public class Demo01 {//main方法public static void main(String[] args) {}/*修饰符返回值类型方法名(...){//方法体return…...

编程日记 2025/9/8 5:40:10

【Ubuntu】【树莓派】Linux系统的远程终端登录、远程图形桌面访问、 X图形窗口访问和文件传输操作

目录一、Ubuntu远程终端并实现文件上传下载 1.1Ubuntu桥接模式设置和新用户的创建 1.2Ubuntu的远程登录并上传和下载文件 1.3在Xming中进行Ubuntu的图形访问二、树莓派远程登录并实现文件上传下载 2.1树莓派在putty上的远程登录 2.2使用ftp远程登录并实现文件上传下载…...

编程日记 2025/9/6 11:49:22

Linux Kernel 2

地址空间（Address Space） 一、物理地址空间（Physical Address Space） 物理地址空间是指 RAM 和设备内存在系统内存总线上所呈现的地址布局。举例：在典型的 32 32 32 位 Intel 架构中， RAM&#xff08…...

编程日记 2025/9/4 4:24:24

二.springBoot项目集成ElasticSearch及使用

二.springBoot项目集成ElasticSearch及使用 1.依赖引入2.ElasticSearch常见用法 1.依赖引入   <dependency><groupId>org.elasticse…...

编程日记 2025/9/3 15:21:51

从三次方程到复平面：复数概念的奇妙演进（一）

注：本文为 “复数 | 历史 / 演进” 相关文章合辑。因 csdn 篇幅限制分篇连载，此为第一篇。生料，不同的文章不同的点。机翻，未校。 Reflections on the History of Complex Numbers 复数的历史回顾 The first occurrence o…...

编程日记 2025/9/6 5:52:41

Day52 | 6. Z 字形变换、8. 字符串转换整数 (atoi)、22. 括号生成、38. 外观数列

6. Z 字形变换题目链接：6. Z 字形变换 - 力扣（LeetCode） 题目难度：中等代码： class Solution {public String convert(String s, int numRows) {if(numRows<2) return s;List<StringBuilder> rowsnew A…...

编程日记 2025/9/7 4:15:43

每日OJ_牛客_ruby和薯条_排序+二分/滑动窗口_C++_Java

目录 ruby和薯条_排序二分/滑动窗口题目解析 C代码 Java代码 ruby和薯条_排序二分/滑动窗口 ruby和薯条描述： ruby很喜欢吃薯条。有一天，她拿出了n根薯条。第i根薯条的长度为ai。 ruby认为，若两根薯条的长度之差在l和r之间&#xff…...

编程日记 2025/9/1 14:25:54

快速幂运算

快速幂运算一、快速幂运算快速幂运算（Exponentiation by Squaring）基本思想算法实现（②③为非递归）① 递归运算② 普通除模运算（不带 **模数** 与带 **模数**）③ 按位与运算使用示例示例代码复杂度分析…...

编程日记 2025/9/8 10:16:41

vue @import引入CSS scoped无效造成全局样式污染

引入css文件导致全局样式污染 1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式 <style lang"scss" scoped> </style> 2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其…...

编程日记 2025/9/8 8:50:45

基于Flask-Login简单登录和权限控制实践

1. 关于Flask-Login Flask-Login 是一个为python Flask Web框架设计的扩展，用于管理用户会话（用户登录状态）。它提供了简单的接口来处理用户登录、注销、记住用户等功能，同时确保用户会话的安全性。以下是 Flask-Login 的一些关键特性和功能： 1.1. 主要功能用户会话管理…...

编程日记 2025/9/3 19:09:14