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…

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()就有可能产生超时问题 如下图 接下来会有一段代…

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

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

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

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

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守卫锁…

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…

云仓酒庄广西发布会盛启:新老经销商欢聚南宁

原标题&#xff1a;云仓酒庄广西发布会盛启&#xff1a;新老经销商欢聚南宁&#xff0c;共襄精酿啤酒盛宴在夏日的热情与激情中&#xff0c;云仓广西发布会于今日在美丽的南宁盛大开幕。来自各地的经销商们齐聚一堂&#xff0c;共同见证了这一盛况。此次发布会不仅是一次产品的…

2024年汉字小达人活动还有5个月开赛:来做18道历年选择题备考吧

现在距离2024年第11届汉字小达人比赛还有五个多月的时间&#xff0c;如何利用这段时间有条不紊地备考呢&#xff1f;我的建议是两手准备&#xff1a;①把小学1-5年级的语文课本上的知识点熟悉&#xff0c;重点是字、词、成语、古诗。阅读理解不需要。②把历年真题刷刷熟&#x…

数电期末复习(一)数制和码制

数制和码制 1.1 概述1.2 几种常用的数制1.2.1 十进制&#xff08;Decimal&#xff09;1.2.2 二进制&#xff08;Binary&#xff09;1.2.3 二-十进制之间的转换1.2.4 十六进制和八进制1.2.5 任意进制之间的转换 1.3 二进制代码1.3.1 二-十进制码(BCD Binary Coded Decimal)1.3.2…

2023年网络安全行业:机遇与挑战并存

2023年全球网络安全人才概况 根据ISC2的《2023年全球网络安全人才调查报告》&#xff0c;全球的网络安全专业人才数量达到了550万&#xff0c;同比增长了8.7%。然而&#xff0c;这一年也见证了网络安全人才短缺达到了历史新高&#xff0c;缺口数量接近400万。尤其是亚太地区&am…

ARM_day6:实现字符串数据收发函数的封装

程序代码&#xff1a; uart4.h&#xff1a; #ifndef __UART4_H__ #define __UART4_H__ #include"stm32mp1xx_gpio.h" #include"stm32mp1xx_rcc.h" #include"stm32mp1xx_uart.h" void uart4_config(); void putchar(char dat); char getchar();…

【电机参数】直流无刷电机机械转速、ud、uq、us、输出功率、相反电动势幅值、载波周期、转矩常数

【电机参数】直流无刷电机机械转速、ud、uq、us、输出功率、相反电动势幅值、载波周期、转矩常数 前言 【电机控制】直流有刷电机、无刷电机汇总——持续更新 使用工具&#xff1a; 1.示波器&#xff1a;PICO2205A 2.电桥LCR&#xff1a;VICIOR4090A 3.电流钳&#xff1a;汉泰…

接口测试相关

接口测试&#xff0c;接口 接口是数据交互的入口和出口 接口是一套规范和标准 统一设计标准 前后端相对独立 扩展型灵活 接口文档。 接口测试 接口测试环境&#xff0c;运行程序&#xff0c;自己搭建环境 接口测试插件 谷歌postman 火狐 restclient java测试工具为j…

Linux系统的磁盘管理与文件系统

目录 一、磁盘结构 1.物理结构 2.数据结构 二、MBR与磁盘分区表示 1.MBR 2.磁盘分区表示 分区的优点 分区的缺点 三、文件系统类型 1.文件系统的组成 XFS SWAP EXT4 2.磁盘管理工具 四、Linux系统添加新硬盘的步骤 一、磁盘结构 1.物理结构 所有存储的设备都在…

【面试经典 150 | 数组】最后一个单词的长度

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;遍历 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内容进行回顾…