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

CSS 字体学习笔记

article 2026/1/25 6:37:11

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

一、字体系列（font-family）

1. 字体系列的分类

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

  • 通用字体系列：拥有相似外观的字体系统组合，如 "Serif"、"Sans-serif"、"Monospace" 等。

  • 特定字体系列：一个特定的字体系列，如 "Times New Roman"、"Arial"、"Courier New" 等。

2. 常见字体系列对比

表格

复制

通用字体系列字体系列说明
SerifTimes New Roman<br>GeorgiaSerif 字体中字符在行的末端拥有额外的装饰
Sans-serifArial<br>Verdana"Sans" 意为无，这些字体在末端没有额外的装饰
MonospaceCourier 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 字体学习笔记

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

编程日记 2025/11/28 21:31:23

《MySQL是怎样运行的》总结笔记

内容太多&#xff0c;主要总结一些自己认为重要的&#xff0c;另外太基础常见可能不会总结上。 字符集和比较规则 MySQL会通过把字符串编码后再进行比较大小并排序&#xff0c;有一些很早的字符集可能会不支持中文&#xff0c;比如ASCII、ISO 8859-1&#xff0c;现在最常用的…...

编程日记 2026/1/24 6:33:57

力扣每日打卡 1922. 统计好数字的数目 (中等)

力扣 1922. 统计好数字的数目 中等 前言一、题目内容二、解题方法1. 暴力解法&#xff08;会超时&#xff0c;此法不通&#xff09;2. 快速幂运算3. 组合计数的思维逻辑分析组合计数的推导例子分析思维小结论 4.官方题解4.1 方法一&#xff1a;快速幂 三、快速幂运算快速幂运算…...

编程日记 2026/1/8 23:08:38

上层 Makefile 控制下层 Makefile 的方法

在复杂的项目中&#xff0c;通常会将项目划分为多个模块或子项目&#xff0c;每个模块都有自己的 Makefile。上层 Makefile 的作用是协调和控制这些下层 Makefile 的构建过程。下面是几种常见的示例&#xff0c;实现上层 Makefile 对下层 Makefile 的控制。 直接调用&#xff1…...

编程日记 2026/1/9 3:05:00

html简易实现推箱子小游戏原理（易上手）

实现效果 使用方向键移动&#xff0c;将橙色箱子推到绿色目标区域&#xff08;黑色块为墙&#xff0c;白色块为可通过区域&#xff0c;蓝球为小人&#xff09; 实现过程 <!DOCTYPE html> <html> <head><title>推箱子小游戏</title><style&g…...

编程日记 2026/1/18 2:09:11

搭建一个Spring Boot聚合项目

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

编程日记 2025/12/24 6:50:38

字符串与栈和队列-算法小结

字符串 双指针 反转字符串(双指针) 力扣题目链接 void reverseString(vector<char>& s) {for (int i 0, j s.size() - 1; i < s.size()/2; i, j--) {swap(s[i],s[j]);} }反转字符串II 力扣题目链接 遍历字符串的过程中&#xff0c;只要让 i (2 * k)&#…...

编程日记 2026/1/15 0:17:40

类似东郊到家的上门按摩预约服务系统小程序APP源码全开源

&#x1f525; 为什么上门按摩正在席卷全国&#xff1f; 万亿蓝海市场爆发 2024年中国按摩市场规模突破8000亿&#xff0c;上门服务增速达65% 90后成消费主力&#xff0c;**72%**白领每月至少使用1次上门按摩&#xff08;数据来源&#xff1a;艾媒咨询&#xff09; 传统痛点…...

编程日记 2025/12/24 2:00:11

Python | 在Pandas中按照中值对箱形图排序

箱形图是可视化数据分布的强大工具&#xff0c;因为它们提供了对数据集内的散布、四分位数和离群值的洞察。然而&#xff0c;当处理多个组或类别时&#xff0c;通过特定的测量&#xff08;如中位数&#xff09;对箱形图进行排序可以提高清晰度并有助于揭示模式。在本文中&#…...

编程日记 2025/12/30 7:07:54

[实战] 二分查找与哈希表查找：原理、对比与C语言实现（附完整C代码）

二分查找与哈希表查找&#xff1a;原理、对比与C语言实现 一、引言 在计算机科学中&#xff0c;高效的数据查找是核心问题之一。本文深入解析两种经典查找算法&#xff1a;二分查找与哈希表查找&#xff0c;从算法原理、时间复杂度、适用场景到完整C语言实现&#xff0c;提供…...

编程日记 2026/1/13 19:08:11

游戏引擎学习第215天

总结并为今天做铺垫 今天的工作内容是解决调试系统中的一个小问题。昨天我们已经完成了大部分的调试系统工作&#xff0c;但还有一个小部分没有完全处理&#xff0c;那就是关于如何层次化组织数据的问题。我们遇到的一个问题是&#xff0c;演示代码中仍有一个尚未解决的部分&a…...

编程日记 2026/1/19 4:54:01

【Redis】redis事物与管道

Redis 事务&#xff08;Transaction&#xff09; 事务概念 事务&#xff1a;是一组操作的集合&#xff0c;是不可分割的工作单元。Redis 事务特点&#xff1a; 一个事务可以一次执行多个命令。所有命令都被顺序化&#xff0c;形成一个队列。所有命令在执行 EXEC 时一次性、顺…...

编程日记 2025/12/27 4:30:15

Django信号使用完全指南示例

推荐超级课程： 本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 **引言：****先决条件：****目录：****1. 什么是Django信号？****2：设置你的Django项目****2.1. 安装Django**2.2. 创建一个Django项…...

编程日记 2025/12/27 8:28:33

DeepSeek BLEU和ROUGE（Recall）的计算

以下是 BLEU Score (Bilingual ​Evaluation ​Understudy)和 ROUGE Score(​Recall-Oriented ​Understudy for ​Gisting ​Evaluation) 的原生Python实现&#xff08;不依赖第三方库&#xff09;&#xff0c;通过分步计算逻辑和示例详细说明。 一、BLEU Score 实现 核心逻辑…...

编程日记 2026/1/16 6:21:00

vulkanscenegraph显示倾斜模型(5.9)-vsg中vulkan资源的编译

前言 上一章深入剖析了GPU资源内存及其管理&#xff0c;vsg中为了提高设备内存的利用率&#xff0c;同时减少内存(GPU)碎片&#xff0c;采用GPU资源内存池机制(vsg::MemoryBufferPools)管理逻辑缓存(VkBuffer)与物理内存(VkDeviceMemory)。本章将深入vsg中vulkan资源的编译(包含…...

编程日记 2025/12/27 18:24:14

今日行情明日机会——20250409

今日行情还需要考虑关税对抗~ 2025年4月8日涨停的主要行业方向分析 1. 军工&#xff08;19家涨停&#xff09; 细分领域&#xff1a;国防装备、航空航天、军民融合。催化因素&#xff1a;国家安全战略升级、国防预算增加、重大军工项目落地预期。 2. 免税&#xff08;15家涨…...

编程日记 2026/1/23 16:58:30

XHR、FetchAxios详解网络相关大片文件上传下载

以下是 XHR（XMLHttpRequest） 与 Fetch API 的全面对比分析，涵盖语法、功能、兼容性等核心差异： 一、语法与代码风格 XHR（基于事件驱动） 需要手动管理请求状态（如 onreadystatechange 事件）和错误处理，代码冗长且易出现回调地狱。 const xhr = new XMLHttpRequest(); x…...

编程日记 2025/11/29 19:16:12

Python基础总结(四)之元组

文章目录 一、元组格式二、元组操作2.1 转换元组 与 列表一样&#xff0c;元组也是序列&#xff0c;唯一的区别在于元组是不能修改的&#xff0c;与字符串一样。 一、元组格式 元组的创建方式很简单&#xff0c;秩序用逗号将元素隔开就能自动创建一个元组 示例&#xff1a; …...

编程日记 2025/12/14 3:29:39

系统分析师（六）-- 计算机网络

概述 TCP/IP 协议族 DNS DHCP 网络规划与设计 逻辑网络设计 物理网络设计 题目 层次化网络设计 网络冗余设计 综合布线系统 IP地址 网络接入技术 其他网络技术应用 物联网...

编程日记 2025/12/30 0:10:46

【前端】【React】useCallback的作用与使用场景总结

一、useCallback 的作用与使用场景总结 useCallback 是 React 提供的一个 Hook&#xff0c;用于缓存函数的引用&#xff0c;避免因为组件重新渲染而导致函数地址发生变化。它返回一个记忆&#xff08;memoized&#xff09;后的回调函数&#xff0c;只有当依赖项发生变化时才会…...

编程日记 2025/12/23 18:25:42

Qwen2.5-VL Technical Report 论文翻译和理解

一、TL&#xff1b;DR Qwen2.5-VL是QwenVL的最新模型&#xff0c;在视觉识别、精准目标定位、稳健文档解析以及长视频理解等方面实现了重大突破引入了动态分辨率处理和绝对时间编码&#xff0c;使其能够处理不同尺寸的图像以及长达数小时的视频&#xff0c;并实现秒级事件定位…...

编程日记 2025/12/27 18:23:46

Foxmail邮件客户端跨站脚本攻击漏洞（CNVD-2025-06036）技术分析

Foxmail邮件客户端跨站脚本攻击漏洞&#xff08;CNVD-2025-06036&#xff09;技术分析 漏洞背景 ‌漏洞编号‌&#xff1a;CNVD-2025-06036 ‌CVE编号‌&#xff1a;待分配 ‌厂商‌&#xff1a;腾讯Foxmail ‌影响版本‌&#xff1a;Foxmail < 7.2.25 ‌漏洞类型‌&#x…...

编程日记 2025/12/27 22:26:11

C语言打印的坑

使用下面的代码buf dprt("data: 0x%02x 0x%02x 0x%02x 0x%02x 0x%02x 0x%02x", buf[0], buf[1], buf[2], buf[3], buf[4], buf[5]); 明明是一个字节一个字节的打&#xff0c;打出来的数据有些却是4个字节 0xffffffff 0xffffffff 0xffffffff 0x7f 0xffffffff 0x7f0…...

编程日记 2025/12/11 5:10:52

高并发内存池（三）：PageCache（页缓存）的实现

前言&#xff1a; 在前两期内容中&#xff0c;我们深入探讨了内存管理机制中在 ThreadCache 和 CentralCache两个层级进行内存申请的具体实现。这两层缓存作为高效的内存分配策略&#xff0c;能够快速响应线程的内存需求&#xff0c;减少锁竞争&#xff0c;提升程序性能。 本期…...

编程日记 2026/1/16 4:15:08

pycharm已有python3.7，如何新增Run Configurations中的Python interpreter为python 3.9

在 PyCharm 中&#xff0c;如果你已经安装了 Python 3.9&#xff0c;并且希望在 Run Configurations 中新增一个 Python 3.9 的解释器&#xff0c;可以按照以下步骤操作&#xff1a; 步骤 1&#xff1a;打开 PyCharm 设置 点击 PyCharm 左上角的 File 菜单。选择 Settings&am…...

编程日记 2025/11/27 9:39:43

Linux驱动开发-网络设备驱动

Linux驱动开发-网络设备驱动 一&#xff0c;网络设备总体结构1.1 总体架构1.2 NAPI数据处理机制 二&#xff0c;RMII和MDIO2.1 RMII接口2.2 MDIO接口 三&#xff0c;MAC和PHY模块3.1 MAC模块3.2 PHY模块 四&#xff0c;网络模型4.1 网络的OSI和TCP/IP分层模型4.1.1 传输层&…...

编程日记 2025/12/27 13:26:34

学习笔记083——Java Stream API

文章目录 1、过滤数据 filter()2、转换元素 map()3、排序 sorted()3.1、自定义排序规则 4、去重 distinct()5、限制元素数量 limit()6、收集结果 collect()6.1、收集为List6.2、收集为Set6.3、转为Map6.4、基本用法&#xff08;注意键冲突会抛异常&#xff09;6.5、处理键冲突&…...

编程日记 2025/11/27 1:27:10

DataEase同比环比

DataEase同比环比 前言术语实现表结构设计DataEase设计创建数据集创建仪表盘最后前言 某大数据项目，需要比较展示今年跟去年的数据，如下图： 说明：比较24,25的产品销量，相同月份做一组，并排放一块 还有更进一步： 说明：比较24,25相同月份，相同产品的销量 直接用DataE…...

编程日记 2025/12/27 12:25:44

RAG 工程基础

RAG 概念 RAG&#xff08;Retrieval - Augmented Generation&#xff09;技术是一种将检索与生成相结合的人工智能技术&#xff0c;旨在利用外部知识源来增强语言模型的生成能力&#xff0c;提高生成内容的质量、准确性和相关性。 具体来说&#xff0c;RAG 技术在处理用户输入的…...

编程日记 2026/1/15 7:21:28

基础算法：滑动窗口_python版本

能使用滑动窗口的题&#xff0c;基本都需要数字为正整数&#xff0c;这样才能保证滑入一个数字总和是增加的(单调性) 一、209. 长度最小的子数组 思路&#xff1a; 已每个位置为右端点&#xff0c;依次加大左端点&#xff0c;最短不满足 sum(num[left,right]) < target的。…...

编程日记 2026/1/5 5:11:58