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

CSS设置字体样式

news 2026/2/9 16:21:46

目录

前言：

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

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2026/1/31 8:12:12

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2026/2/7 16:38:17

​​企业大模型服务合规指南：深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...

编程新知 2026/2/9 1:32:22

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

编程新知 2025/12/8 9:32:22

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2026/2/1 16:16:37