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

本文主要是介绍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属性。

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


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

这篇关于CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/926461

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入,读取速度会加快(但是在字符串的题里面和容易出现问题) 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器,指向键值>= key的第一个元素。 iterator upper_bou

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]