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

CSS设置字体样式

news 2025/9/11 4:57:30

目录

前言：

1.font-family：

2.font-style：

3.font-weight：

4.font-size：

5.font-variant：

6.font：

前言：

在网页中字体是重要的组成部分，使用好字体可以让网页更加美观，在CSS中提供了一系列用来设置文本样式的属性，如更改字体，控制字体大小和粗细等等。如下：

font-family：用来设置字体的。

font-style：用来设置字体风格，比如斜体。

font-weight：用来设置字体粗细。

font-size：用来设置字体尺寸。

font-variant：可以将小写字母转换为小型大写字母。

font-stretch：对字体进行伸缩变形(使用较小，并且主流的浏览器都不支持，就不做讲解了)。

font：字体所有属性的缩写，可以在一个声明里面设置多个字体属性。

CSS设置网页颜色-CSDN博客 初识CSS-CSDN博客

1.font-family：

font-family属性是用来设置元素里面的字体，因为字体种类成千上万，有些还要钱，因为我们电脑不可能有所有的字体，所以为了保证我们设置的字体能够正常显示，可以通过font-family属性定义一个由若干字体组成的列表，字体名称之间可以使用逗号,分隔，浏览器会先使用列表里第一个字体，如果不支持就下一个，一直到所有都尝试完之后，如果都不是就使用浏览器默认的字体。font-family的值如下：

值说明

family-name,

generic-family

family-name:字体的名称，一个字体名称就表示一种字体，如"宋体"就是字体的种类之一；

generic-family：字体族，就是某种类型的字体组合，一个字体代表一种类型的字体，其中包含很多类似但不同的字体，如"sans-serif"就是一种无衬线字体，其中包含了很重相似的字体。

字体的默认值取决于浏览器的设置。

inherit是从父元素中继承字体的设置。

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.typeface {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif}</style>
</head><body><h1 class="typeface">这设置了font-family属性</h1>
</body></html>

在设置字体或者字体族的时候如果其中有多个空格或者多个单词，就需要使用引号将其包裹，如：'Times New Roman'如果元素是在style属性里面使用就必须使用单引号。

代码的运行结果如下所示：

2.font-style：

font-style属性可以用来设置字体的样式，斜体，倾斜等等，如下是其的值：

值说明
normal默认值，文本以正常字体样式显示。
italic文本以斜体显示。
oblique文本倾斜显示。
inherit从父元素中继承字体样式。

如下是代码的示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {font-style: oblique;}.normal {font-style: normal;}.italic {font-style: italic;}.oblique {font-style: oblique;}.inherit {font-style: inherit;}</style>
</head><body>只是一段无意义的文本<p class="normal">normal：正常的字体。</p><p class="italic">italic：显示一个斜体的字体。</p><p class="oblique">oblique：显示一个倾斜的字体。</p><p class="inherit">inherit：从父元素继承字体的设置。</p>
</body></html>

代码的运行结果如下：

 

3.font-weight：

在CSS中font-weight可以设置字体的粗细，其值如下：

值说明
normal默认值，标准字体。
bold粗体字体。
bolder更粗的字体。
lighter更细的字体。
100,200,300,400,500,600,700,800,900由粗到细的设置字体粗细，100为最细的，400等于normal，700等于bold。
inherit从父元素中继承字体的粗细。

font-weight代码示例如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.weight-100 {font-weight: 100;}.weight-300 {font-weight: 300;}.normal {font-weight: normal;}.bold {font-weight: bold;}.bolder {font-weight: bolder;}</style>
</head><body><p class="weight-100">font-weight：100.</p><p class="weight-300">font-weight：300.</p><p class="normal">font-weight：normal.</p><p class="bold">font-weight：bold.</p><p class="bolder">font-weight：bolder.</p></body></html>

上述代码的运行结果如下所示：

4.font-size：

font-size属性是用来设置字体的大小(字号)的，其值如下：

值说明
xx-small,x-smal,small,medium,large,x-large,xx-large以关键字的形式把字体设置为不同的大小，从xx-small到xx-large依次变大，默认值为medium。
smaller为字体设置一个比父元素更小的尺寸。
larger为字体设置一个比父元素更大的尺寸
length以数值加单位的形式把字体设置成为一个固定的尺寸，如18px，2em。
%以百分比的形式给字体设置一个相对于父元素字体的大小。
inherit

从父元素中继承字体的尺寸。

 font-size属性的示例代码如下：

5.font-variant：

font-variant属性可以将文本里面的小写英文字母转换为小型大写字母(转换之前的字母和转换之后的字母大小基本差不多，所以称其为小型大写字母)，其值如下：

值说明
normal默认值，浏览器会显示一个标准的字体。
small-caps将文本中的小写字母转换为小型大写字母。
inherit从父元素里继承font-variant属性的值。

 font-variant属性的示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.normal {font-variant: normal;}.small {font-variant: small-caps;}</style>
</head><body><p class="normal">This is a paragraph</p><p class="small">This is a paragraph</p></body></html>

 上述代码的运行结果如下所示：

6.font：

font属性和之前的background功能类似，通过font属性可以同时设置多个字体的属性，不同的是，使用font需要遵循如下顺序：

font: [[font-style||font-variant||font-weight||font-stretch]?font-size[/line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar

使用font时需要注意：

  • 使用font属性必须按照上述顺序，而且font-size和font-family这两个属性不可以忽略。
  • font属性里的每个参数只可以设置一个值，除font-size和font-family属性外，被忽略的属性将变成各自的默认值。
  • 如要定义line-height属性，就需要使用斜线/将font-size和line-height属性隔开。

如下是font的示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font {font: oblique 100 12px/30px arial, sans-serif;}</style>
</head><body><p class="font">这是一个font属性的设置。</p>
</body></html>

上述代码的运行结果如下：

相关文章：

CSS设置字体样式

目录 前言&#xff1a; 1.font-family&#xff1a; 2.font-style&#xff1a; 3.font-weight&#xff1a; 4.font-size&#xff1a; 5.font-variant&#xff1a; 6.font&#xff1a; 前言&#xff1a; 在网页中字体是重要的组成部分&#xff0c;使用好字体可以让网页更…...

编程日记 2024/4/7 10:03:48

[Java线程池]ExecutorService|CompletionService的区别与选择

这段时间对业务系统做了个性能测试&#xff0c;其中使用了较多线程池的技术&#xff0c;故此做一个技术总结。 这次总结的内容比较多&#xff0c;主要是四个&#xff1a; ExecutorServiceCompletionServiceRunnableCallable 前两个是线程池相关接口&#xff0c;后两个是多线…...

编程日记 2024/4/7 10:02:47

MySQL-SQL编写练习：基本的SELECT语句

基本的SELECT语句 1. SQL的分类 DDL:数据定义语言。CREATE \ ALTER \ DROP \ RENAME \ TRUNCATEDML:数据操作语言。INSERT \ DELETE \ UPDATE \ SELECT &#xff08;重中之重&#xff09;DCL:数据控制语言。COMMIT \ ROLLBACK \ SAVEPOINT \ GRANT \ REVOKE 学习技巧&#xf…...

编程日记 2024/4/7 10:00:44

C++经典面试题目（十九）

1、什么是析构函数&#xff1f;它有什么作用&#xff1f; 析构函数是类的特殊成员函数&#xff0c;用于在对象被销毁时执行清理工作。它的名称与类名相同&#xff0c;前面加上波浪号&#xff08;~&#xff09;。析构函数的作用在于确保在对象被销毁时释放占用的资源&#xff0…...

编程日记 2024/4/7 9:58:42

acwing算法提高之图论--SPFA找负环

目录 1 介绍2 训练 1 介绍 本专题用来记录使用spfa算法来求负环的题目。 2 训练 题目1&#xff1a;904虫洞 C代码如下&#xff0c; #include <cstring> #include <iostream> #include <algorithm> #include <queue>using namespace std;typedef p…...

编程日记 2024/4/7 9:56:40

I2C驱动实验：测试I2C驱动是否与设备匹配

一. 简介 前面一篇文章在设备树中创建 ap3216c设备节点信息。 第二篇文章编写了简单的 I2C设备驱动框架&#xff0c;包括 构造 i2c_driver结构体&#xff0c;i2c_driver的注册与注销等。文章如下&#xff1a; I2C驱动实验&#xff1a;向设备树添加 I2C设备的设备节点信息-C…...

编程日记 2024/4/7 9:53:36

5560.树的直径

蛮不错的一道题目&#xff0c;你要利用树的性质分析出&#xff0c;你只需要维护上一次的树的直径的两个端点就好了 #include<iostream>using namespace std; using ll long long; using pii pair<int,int>; const int N 6e510; const int inf 0x3f3f3f3f; cons…...

编程日记 2024/4/7 9:50:33

Decoupled Multimodal Distilling for Emotion Recognition 论文阅读

Decoupled Multimodal Distilling for Emotion Recognition 论文阅读 Abstract1. Introduction2. Related Works2.1. Multimodal emotion recognition2.2. Knowledge distillation3. The Proposed Method3.1. Multimodal feature decoupling3.2. GD with Decoupled Multimodal …...

编程日记 2024/4/7 9:44:27

【css】使用display:inline-block后，元素间存在4px的间隔

问题&#xff1a;在本地项目中使用【display: inline-block】&#xff0c;元素间存在4px间隔。打包后发布到外网又不存在这个问题了。 归根结底这是一个西文排版的问题&#xff0c;英文有空格作为词分界&#xff0c;而中文则没有。 此时的元素具有文本属性&#xff0c;只要标签…...

编程日记 2024/4/7 9:43:26

代码执行漏洞

原理&#xff1a;没有对接口输入的内容进行严格的判断 造成攻击者精心构造的代码非法执行 当应用在调用一些能将字符转化为代码的函数(如PHP中的eval)时&#xff0c;没有考虑用户是否能控 制这个字符串&#xff0c;这就会造成代码执行漏洞。 相 关 函 数 &#xff1a; PHP&…...

编程日记 2024/4/7 9:40:23

SQLServer2022安装

首先从官网上下载2022版本SQL Server 下载 | Microsoft 选择此把呢不能运行&#xff0c;适合我们在学习阶段使用。 同时网页往下滑动&#xff0c;下载SSMS 下载后的文件 注意&#xff1a;在运行时最好获取管理员权限运行&#xff0c;第一次在安装时未获取管理员权限最终…...

编程日记 2024/4/7 9:39:22

vue2 配置@指向src

使用的是vue cli创建的项目。 1.安装 path 如果在 Node.js 环境中运行代码&#xff0c;path 模块默认是可用的&#xff0c;则不需要单独安装&#xff0c;否则输入下面命令安装path npm i path -S 2.找到vue.config.js文件&#xff1a; const { defineConfig } require(vue/…...

编程日记 2024/4/7 9:36:18

用友U9 存在PatchFile.asmx接口任意文件上传漏洞

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 用友U9是由中国用友软件股份有限公司开发的一款企业…...

编程日记 2024/4/7 9:34:16

如何卸载干净 IDEA（图文讲解）

更新时间 2022-12-20 11:一则或许对你有用的小广告 星球 内第一个项目&#xff1a;全栈前后端分离博客项目&#xff0c;演示地址&#xff1a;Weblog 前后端分离博客, 1.0 版本已经更新完毕&#xff0c;正在更新 2.0 版本。采用技术栈 Spring Boot Mybatis Plus Vue 3.x Vit…...

编程日记 2024/4/7 9:31:13

自动化运维（十）Ansible 之进程管理模块

Ansible的进程管理模块提供了一种强大而灵活的方式来管理和操作各种进程管理器和服务。无论你使用的是Supervisor、Systemd、传统的init脚本还是Runit,这些模块都可以帮助你轻松地管理服务的生命周期。通过合理地使用这些模块,你可以实现服务的自动化管理,提高系统的可靠性和稳…...

编程日记 2024/4/7 9:30:12

【leetcode279】完全平方数,动态规划解法

原问题&#xff1a;给定一个非负整数n&#xff0c;如果把它视作一些完全平方数的和&#xff0c;那么最少需要多少个完全平方数&#xff1f; 这次学习到一个热心网友的解法&#xff1a;把问题转化兑换零钱问题&#xff0c;然后使用动态规划求解。 比如&#xff0c;给定 n12, 那…...

编程日记 2024/4/7 9:29:10

Java 元素排序（数组、List 集合）

数组元素排序 升序 int[] array {3, 1, 4, 5}; Arrays.sort(array);// 升序排序 System.out.println(Arrays.toString(array)); //输出&#xff1a;[1, 3, 4, 5]降序 可以先将数组元素存入 List 集合&#xff0c;然后集合元素逆序&#xff0c;最后将集合元素写回原数组。&a…...

编程日记 2024/4/7 9:28:08

使用vite创建一个react18项目

一、vite是什么&#xff1f; vite 是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。它主要由两部分组成&#xff1a; 一个开发服务器&#xff0c;它基于原生 ES 模块提供了丰富的内建功能&#xff0c;如速度快到惊人的模块热更新&#xff08;HMR&#xff09;。 …...

编程日记 2024/4/7 9:23:01

子集(迭代)(leetcode 78)

核心逻辑&#xff1a; 根据子数组包含的元素个数迭代&#xff1a; 现有子集的基础上通过添加这个新元素来翻倍子集的数量 f(n)2f(n−1) vector<vector<int>> subsets(vector<int>& nums) {vector<vector<int>> ans;int i,j,k;ans.p…...

编程日记 2024/4/7 9:19:57

汽车疲劳测试试验平台技术要求（北重厂家）

汽车疲劳测试试验平台技术要求通常包括以下几个方面&#xff1a; 车辆加载能力&#xff1a;测试平台需要具备足够的承载能力&#xff0c;能够同时测试多种车型和不同重量的车辆。 动力系统&#xff1a;测试平台需要具备稳定可靠的动力系统&#xff0c;能够提供足够的力和速度来…...

编程日记 2024/4/7 9:11:49

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/8/5 5:52:21

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/9/9 15:18:37

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/9/1 12:53:45

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/8 10:43:09

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/9/7 1:59:25

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/8/26 22:46:30

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/8/18 9:46:04

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/9/9 10:10:31

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/9/9 10:09:37

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/9/2 20:17:23