CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)

        前言:在我们学习CSS的时候,主要学习选择器和常用的属性,而这篇文章讲解的就是最基础的属性之一——文字属性。


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

废话不多说,让我们直接开始!

CSS字体属性

        先让我们看一下常用的字体属性有哪些:

目录

CSS字体属性

        (1)文字大小

        (2)字体族

        (3)字体风格

        (4)字体粗细

        (5)字体复合写法


        (1)文字大小

        属性名: font-size
        作用:用于控制字体的大小。
使用语法:

div {
font-size: /* 设置字体的大小 */;
}

这里我们直接使用一个案例来加深理解:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.22.css">
</head>
<body><div>这是一段将要加粗的文字</div>
</body>
</html>

CSS代码:

/* 将div标签中的文字大小改为40px */
div {font-size: 40px;
}

注意:

1. Chrome 浏览器支持的最小文字为12px ,默认的文字大小为16px ,并且0px 会自动
消失。
2. 不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大小。
3. 通常以给 body 设置font-size 属性,这样body 中的其他元素就都可以继承了。

这样我们就了解了如何改变文字的大小。

        (2)字体族

        属性名: font-family
        作用:用于控制字体类型。
使用语法:

div {
font-family: /* 添加文字类型 */
}

我们直接使用一个案例来加深理解:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.22.css">
</head>
<body><div>这是一段将要修改文字类型的文字</div>
</body>
</html>

CSS代码:

/* 将文字类型改为华文彩云,如果修改失败,则改为微软雅黑 */
div {font-family: "华文彩云","微软雅黑",sans-serif
}

注意:

1. 使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置里
去寻找。
2. 如果字体名包含空格,必须使用引号包裹起来。
3. 可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面
的,且通常在最后写上serif (衬线字体)或sans-serif (非衬线字体)。
4. windows 系统中,默认的字体就是微软雅黑。

这样我们就了解了如何改变文字的类型。

        (3)字体风格

        属性名: font-style
        作用:用于控制字体是否为斜体。

常用值:
        1. normal :正常(默认值)
        2. italic :斜体(使用字体自带的斜体效果)
        3. oblique :斜体(强制倾斜产生的斜体效果)

 使用语法: 

div {
font-style: /* 设置文字是否倾斜 */;
}

我们直接使用一个案例来加深理解:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.22.css">
</head>
<body><div>这是一段将要倾斜的文字</div>
</body>
</html>

CSS代码:

/* 将文字设置为倾斜 */
div {font-style: italic;
}

注:实现斜体时,更推荐使用italic 。

这样我们就了解了如何使文字倾斜。

        (4)字体粗细

        属性名: font-weight
        作用:用于控制字体的粗细。

常用值:

        1. lighter :细
        2. normal : 正常
        3. bold :粗
        4. bolder :很粗 (多数字体不支持)

-------------------------------------------------------------------------------------------------------------------------

数值:

        1. 100~1000 且无单位,数值越大,字体越粗 (或一样粗,具体得看字体设计时的
精确程度)。

        2. 100~300 等同于lighter , 400~500 等同于normal , 600 及以上等同于
bold 。

使用语法:

/* 使用特定表示 */
div {
font-weight: bold;
}
/* 使用数值 */
div {
font-weight: 600;
}

我们直接使用一个案例来加深理解:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.22.css">
</head>
<body><div>这是一段将要加粗的文字</div>
</body>
</html>

CSS代码:

/* 将文字设置为粗体 */
div {font-weight: bold;
}

这样我们就了解了如何加粗文字。

        (5)字体复合写法

        属性名: font
        作用:将上述所有字体相关的属性复合在一起编写。

编写规则:
        1. 字体大小、字体族必须都写上。
        2. 字体族必须是最后一位、字体大小必须是倒数第二位。
        3. 各个属性间用空格隔开。

感觉还是没有太懂,那我们使用一个案例来使你更好的理解:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.22.css">
</head>
<body><div>这是一段将要修改的文字</div>
</body>
</html>

CSS代码:

/* 将文字设置为粗体,大小40px 文字类型为微软雅黑,如果设置失败则设置为华文彩云 */
div {font: bold italic 40px "微软雅黑","华文彩云",sans-serif;
}

注:实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用font-size属性。

这样我们就了解了如何将文字的属性复合的写在一起了。


以上就是这篇文章的全部内容了~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】C++11 包装器

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 function包装器 fu…

富格林:养成可信操作稳健出金

富格林认为&#xff0c;在黄金投资过程中&#xff0c;有许多方法、技能和基础知识是影响投资者稳健出金的关键因素。因此&#xff0c;投资者需要养成对这些可信知识的掌握有助于获得更稳定的盈利出金。以下是黄金现货投资过程中需要了解的一些可信操作技巧。相信学习了这些富格…

RHCE:网络服务综合项目

基础配置&#xff1a; 1.配置主机名&#xff0c;静态IP地址 2.开启防火墙并配置 3.部分开启SElinux并配置 4.服务器之间使用同ntp.aliyun.com进行时间同步 5.服务器之间实现SSH免密登录 业务需求&#xff1a; 1.Server-NFS-DNS主机配置NFS服务器&#xff0c;将博客网…

【Lattice FPGA 开发】Modelsim与Diamond联合仿真

本文讲解Modelsim与Diamond进行联合仿真步骤&#xff0c;以及对遇到问题的解决与说明。 文章目录 软件版本0. Diamond设置文件为仿真文件特别注意 1. Diamond设置仿真软件为Modelsim2. Modelsim编译Lattice的库文件2.1 新建文件夹存放库文件2.2 Modelsim中建立新的仿真库2.2.1…

千锤百炼之算法Scanner和System.out引起超时解决办法

题外话 觉得这个内容还是很关键的,过来写一下吧 本次内容有点抽象大家试着听一下 正题 做过算法题的人都知道,无论是在力扣还是牛客或者别的网站刷题,很多情况下都会遇到输入输出的情况,当我们用Scanner和System.out.print()就有可能产生超时问题 如下图 接下来会有一段代…

6、掌握对象在内存中的分配与变迁

6.1、前文回顾 在昨天的文章中,我们已经介绍了一些关于对象分配的基础知识。现在,大家应该对这些概念有了一定的了解。在编程中,我们创建的对象通常分为两类: 短期存活的对象:这类对象在Java堆内存中分配后,会迅速使用完毕并被垃圾回收器回收。长期存活的对象:这类对象…

远程计算机或设备将不接受连接_解决方法

重启了下电脑遇到了无法联网的问题&#xff0c;解决方法如下&#xff1a; 打开“控制面板”&#xff1b; 打开Internet选项&#xff1b; 点击“连接”&#xff1b; 点击“局域网设置”&#xff1b; 设置选项为下图&#xff1a; 连接成功了&#xff1a; 原因&#xff1a; 打…

《论文阅读》对比学习下的自然语言生成任务系列论文讲解

《论文阅读》对比学习下的自然语言生成任务系列论文讲解 前言基本知识对比学习(Contrastive Learning)无监督的对比学习监督对比学习NLG with Supervised Contrastive LearningCONT: Contrastive Neural Text Generation(NIPs 2022)Multi-level Adaptive Contrastive Learn…

数字化到底具有何种魔力!成为跟上时代的必经之路?

数字化确实具有深远的魔力和吸引力&#xff0c;成为现代企业在跟上时代步伐、实现持续发展和创新的重要驱动力。相较于传统信息化&#xff0c;数字化转型能够为企业带来更为显著和全面的降本增效效应。 首先&#xff0c;数字化转型通过深度融合信息技术和管理标准化&#xff0c…

利用Vue 2路由传递Props:提升组件间数据交互的灵活性与效率

利用Vue 2路由传递Props&#xff1a;提升组件间数据交互的灵活性与效率 在构建基于Vue 2的单页应用程序&#xff08;SPA&#xff09;时&#xff0c;Vue Router扮演着至关重要的角色&#xff0c;它负责管理应用的路由导航和页面间的切换。不仅如此&#xff0c;Vue Router还提供…

Java八股文面试之多线程篇

文章目录 线程有哪几种状态。创建多线程有几种方法?如何停止一个正在运行的线程sleep()和wait() 有什么区别?Thread 类中的start() 和 run() 方法有什么区别?Thread类中的yield方法有什么作用?乐观锁和悲观锁的理解以及实现有三个线程T1,T2,T3如何保证顺序执行简述一下你对…

星期一(蓝桥杯)

题目 整个20世纪&#xff08;1901年1月1日至2000年12月31日之间&#xff09;&#xff0c;一共有多少个星期一&#xff1f;(不要告诉我你不知道今天是星期几) 以下程序实现了这一功能&#xff0c;请你补全以下空白处内容&#xff1a; 提示&#xff1a; 判断1901年1月1日到20…

GPU版本torch使用教程

GPU版本torch使用教程 一、下载配置CUDA和CUDNN &#xff08;1&#xff09;进入cmd使用nvidia-smi.exe查看自己电脑支持的最新CUDA版本&#xff08;可以下载地低版本&#xff09;&#xff0c;如图&#xff1a; 也可以通过NVIDIA控制面板&#xff08;NVIDIA Control Panel&am…

HTML重要标签梳理学习

1、HTML文件的框架 使用VS Code编码时&#xff0c;输入!选中第一个&#xff01;就可以快速生成一个HTML文件框架。 2、标签 <hr> <!--下划线--> <br> <!--换行--> <strong>加粗</strong> &…

C++11——线程库的理解与使用

目录 前言 一、线程库的构造 1.默认构造 2.带参构造 3.拷贝构造与赋值拷贝&#xff08;不支持&#xff09; 4.移动构造 二、线程调用lambda函数 三、线程安全与锁 1.lambda中的线程与锁 2.函数指针中的线程与锁 3.trylock() 4.recursive_mutex 5.lock_gurad守卫锁…

开源工具_Aider_重塑编程体验

项目地址&#xff1a;GitHub - paul-gauthier/aider: aider is AI pair programming in your terminal编程语言&#xff1a;主要使用 PythonStar&#xff1a;8.9K功能&#xff1a;在终端中直接与 GPT-3.5/GPT-4 交互&#xff0c;编写或修改代码主要优点&#xff1a;增加了代码生…

JAVA-服务器搭建-创建web后端项目

首先打开IDEA 点击新建项目 写好名称-模板选择 Web应用程序 -语言选择 Java 构建系统选择 Maven 然后点击下一步 选择版本-选择依赖项 Web Profile 点击创建 点击当前文件-选择编辑配置 选择左上角的加号-选择Tomcat服务器-选择本地 点击配置-选择到Tomcat目录-点击确定 起个…

利用STM32 HAL库实现USART串口通信,并通过printf重定向输出“Hello World“

一、开发环境 硬件&#xff1a;正点原子探索者 V3 STM32F407 开发板 单片机&#xff1a;STM32F407ZGT6 Keil版本&#xff1a;5.32 STM32CubeMX版本&#xff1a;6.9.2 STM32Cube MCU Packges版本&#xff1a;STM32F4 V1.27.1 上一篇使用STM32F407的HAL库只需1行代码实现US…

记一次etcd数据恢复

使用官方示例 etcd:image: bitnami/etcd:3.4.15restart: alwaysvolumes:- ./etcd_data:/bitnami/etcdenvironment:ALLOW_NONE_AUTHENTICATION: "yes"ETCD_ADVERTISE_CLIENT_URLS: "http://etcd:2379"ETCD_LISTEN_CLIENT_URLS: "http://0.0.0.0:2379…

史记-张良-留侯世家-8-上欲废太子;张良出谋划策;政治智慧

原文&#xff1a; 上欲废太子&#xff0c;立戚夫人子赵王如意。大臣多谏争&#xff0c;未能得坚决者也。吕后恐&#xff0c;不知所为。人或谓吕后曰&#xff1a;“留侯善画计策&#xff0c;上信用之。”吕后乃使建成侯吕泽劫留侯&#xff0c;曰&#xff1a;“君常为上谋臣&…