【CSS系列】第四章 · CSS字体属性

写在前面


        Hello大家好, 我是【麟-小白】,一位软件工程专业的学生,喜好计算机知识。希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误不足之处,请多多指正!谢谢大家!!!

        如果小哥哥小姐姐们对我的文章感兴趣,请不要吝啬你们的小手,多多点赞加关注呀!❤❤❤ 爱你们!!!


目录

写在前面

1. CSS字体属性

1.1 字体大小

1.2 字体族

1.3 字体风格

1.4 字体粗细

1.5 字体复合写法

结语


【往期回顾】

【CSS系列】第一章 · CSS基础

【CSS系列】第二章 · CSS选择器

【CSS系列】第三章 · CSS三大特性和颜色的表示


【其他系列】

【HTML系列】

【Java基础系列】(已更新完)


1. CSS字体属性


1.1 字体大小

  • 属性名: font-size
  • 作用:控制字体的大小。

语法:

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

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_字体大小</title>
    <style>
        .xiaobai1 {
            font-size: 40px;
        }
        .xiaobai2 {
            font-size: 30px;
        }
        .xiaobai3 {
            font-size: 20px;
        }
        .xiaobai4 {
            font-size: 12px;
        }
        .xiaobai5 {
            font-size: 3px;
        }
        .xiaobai7 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
    <div>麟-小白6</div>
    <div class="xiaobai7">麟-小白7</div>
</body>
</html>


1.2 字体族

  • 属性名: font-family
  • 作用:控制字体类型。
语法:
div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
}
注意:
  • 使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置里去寻找。
  • 如果字体名包含空格,必须使用引号包裹起来。
  • 可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面的,且通常在最后写上 serif (衬线字体)或 sans-serif (非衬线字体)。
  • windows 系统中,默认的字体就是微软雅黑。

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>02_字体族</title>
    <style>
        .xiaobai1 {
            font-size: 100px;
            font-family: "微软雅黑";
        }

        .xiaobai2 {
            font-size: 100px;
            font-family: "楷体";
        }

        .xiaobai3 {
            font-size: 100px;
            font-family: "宋体";
        }

        .xiaobai4 {
            font-size: 100px;
            font-family: "华文彩云";
        }

        .xiaobai5 {
            font-size: 100px;
            font-family: "翩翩体-简", "华文彩云", "华文琥珀", "微软雅黑";
        }

        .xiaobai6 {
            font-size: 100px;
            font-family: "HanziPen SC", "STCaiyun", "STHupo", "Microsoft YaHei", "sans-serif";
        }
    </style>
</head>

<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
    <div class="xiaobai6">麟-小白6</div>
</body>

</html>


1.3 字体风格

  • 属性名: font-style
  • 作用:控制字体是否为斜体。
常用值:
  • normal :正常(默认值)
  • italic :斜体(使用字体自带的斜体效果)
  • oblique :斜体(强制倾斜产生的斜体效果)
  • 实现斜体时,更推荐使用 italic
语法:
div {
    font-style: italic;
}

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_字体风格</title>
    <style>
        .xiaobai1 {
            font-size: 100px;
            font-style: normal;
        }
        .xiaobai2 {
            font-size: 100px;
            font-style: italic;
        }
        .xiaobai3 {
            font-size: 100px;
            font-style: oblique;
        }
        em {
            font-size: 100px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <em>麟-小白4</em>
</body>
</html>


1.4 字体粗细

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

常用值:

  • 关键词
    • lighter :细
    • normal 正常
    • bold :粗
    • bolder :很粗 (多数字体不支持)
  • 数值:
    • 100~1000 且无单位,数值越大,字体越粗 (或一样粗,具体得看字体设计时的精确程度)。
    • 100~300 等同于 lighter 400~500 等同于 normal 600 及以上等同于bold
语法:
div {
    font-weight: bold;
}
div {
    font-weight: 600;
}

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_字体粗细</title>
    <style>
        div {
            font-size: 100px;
        }
        .xiaobai1 {
            font-weight: lighter;
        }
        .xiaobai2 {
            font-weight: normal;
        }
        .xiaobai3 {
            font-weight: bold;
        }
        .xiaobai4 {
            font-weight: bolder;
        }
        .xiaobai5 {
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
</body>
</html>

1.5 字体复合写法

  • 属性名: font ,可以把上述字体样式合并成一个属性。
  • 作用:将上述所有字体相关的属性复合在一起编写。

编写规则:

  • 字体大小、字体族必须都写上。
  • 字体族必须是最后一位、字体大小必须是倒数第二位。
  • 各个属性间用空格隔开。
  • 实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 font-size 属性。

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_字体复合属性</title>
    <style>
        .xiaobai {
            font: bold italic 100px "华文琥珀",sans-serif;
        }
    </style>
</head>
<body>
    <div class="xiaobai">麟-小白</div>
</body>
</html>


结语


本人会持续更新文章的哦!希望大家一键三连,你们的鼓励就是作者不断更新的动力

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

人机智能中几个困难问题浅析

1、人机之间与人人之间信任的区别人机之间的信任与人人之间的信任存在以下异同&#xff1a;①信任对象。人机之间的信任的对象是计算机系统、算法、机器人等&#xff0c;而人人之间的信任的对象是其他人。②信任方式。人机之间的信任是基于技术、安全协议等建立的&#xff0c;例…

【Linux网络】传输层中UDP和TCP协议

文章目录 1、再谈端口号2、UDP协议3、TCP协议3.1 TCP协议段格式3.2 TCP的三次握手和四次挥手&#xff08;连接管理机制&#xff09;3.3 TCP的滑动窗口3.4 TCP的流量控制3.5 拥塞控制3.6 延迟应答和捎带应答3.7 面向字节流和粘包问题3.8 TCP总结 1、再谈端口号 端口号port标识一…

2023年前端面试题汇总-代码输出篇

1. 异步 & 事件循环 1. 代码输出结果 const promise new Promise((resolve, reject) > {console.log(1);console.log(2); }); promise.then(() > {console.log(3); }); console.log(4); 输出结果如下&#xff1a; 1 2 4 promise.then 是微任务&#xff0c;它…

1、防刷限流实现1

1、本章诉求 限流的需求出现在许多常见的场景中&#xff1a; 秒杀活动&#xff0c;有人使用软件恶意刷单抢货&#xff0c;需要限流防止机器参与活动某api被各式各样系统广泛调用&#xff0c;严重消耗网络、内存等资源&#xff0c;需要合理限流 2、流程设计 3、方案实现 3.1…

使用 spring 的 IoC 的实现账户的CRUD(2)双层实现

spring实现service和dao的数据的查找 dao层设置接口实现dao层的接口service设置接口通过注入dao层&#xff0c;来实现接口 //dao层的接口&#xff0c;定义了根据id查询的方法 public interface Accountdao {Account findByid(int id); }实现接口&#xff1a;实现了查询的方法 …

项目创建第一天 搭建前端环境

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、环境是什么&#xff1f;二、使用步骤1.前台搭建方式1.创建项目2.目录结构3. 安装elementui4. 创建路由5.使用axios6.bug记录6.1出现跨域问题6.2 解决方式6.…

2023年会展服务研究报告

第一章 行业概况 会展行业是指一系列与会议、展览、展示相关的服务和经济活动的总称&#xff0c;是加强企业间交流、促进合作和推动经济发展的重要手段。该行业涉及广泛&#xff0c;包括会议和展览的组织、场地租赁和设计、活动策划和执行、展品运输和咨询服务等各个环节。随着…

tiechui_lesson03_缓冲读写与自定义控制

学习了与应用层通过缓冲区方式的交互&#xff0c;包括读写&#xff0c;自定义控制等。小坑比较多&#xff0c;大部分是是头文件和设置上的错误&#xff0c;跟着视频敲想快进就跳过了一些细节。包括&#xff1a; <windef.h> 头文件的引用 //使用DWORD等类型switch语句…

基于标签的协同过滤算法实现与个人兴趣相关的文章推荐

一、前言 在当前信息爆炸的时代&#xff0c;每天都会涌现出大量的文章&#xff0c;人们有时候会感到信息的获取难度比筛选更大。而作为信息的提供者&#xff0c;我们应当为用户提供依据个人兴趣的文章推荐。 本项目中的文章标签相似度推荐功能使用了一种基于标签的协同过滤算…

Java版本的工程项目管理系统源代码之工程项目管理系统面临的挑战

​ ​工程项目管理系统是指从事工程项目管理的企业&#xff08;以下简称工程项目管理企业&#xff09;受业主委托&#xff0c;按照合同约定&#xff0c;代表业主对工程项目的组织实施进行全过程或若干阶段的管理和服务。 ​系统定义 工程项目管理企业不直接与该工程项目的总承包…

易视腾iS-E5-NGH_3798MV100_MT7601_卡刷固件包_当贝纯净桌面

易视腾iS-E5-NGH_3798MV100_MT7601_卡刷固件包_当贝纯净桌面 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0…

产品经理 - 原型图设计软件

原型图设计软件哪个好用&#xff1f;6款好用软件推荐&#xff01; - 知乎 原型图都可以用什么软件做&#xff1f;11款好用软件分享&#xff01; 摩客, 墨刀 2014 墨刀是A股上市公司万兴科技旗下的在线一体化产品设计协作平台 即时设计是一款支持在线协作的专业级 UI 设计工…

回首来路多感概,最是奋斗动人心。

我们必需要在不同的时代有不同的领悟&#xff0c;才能充满生机地去迎接生命中每个新的开始。 文章目录 前言 初心 成长 收获 憧憬 出发 前言 今天是我成为csdn创作者一周年纪念日&#xff0c;我非常开心能够和大家分享我的写作之旅。在这一年里&#xff0c;我经历了许多挑…

QT QGraphicsView 提升到 QChartView报错 解决方案

QT QGraphicsView 提升到 QChartView报错 解决方案 本文主要描述, 使用QT提供的QChartView来绘制图表,提升QGraphicsView控件继承QChartView后,然后将QGraphicsView提升到我们自己写的类,怎么才能确保提升后编译不报错. [问题描述] 使用QGraphicsView显示图表的时候,我们需要将…

基于 TiDB + Flink 实现的滑动窗口实时累计指标算法

作者&#xff1a;李文杰 前言 在不少的支付分析场景里&#xff0c;大部分累计值指标可以通过 Tn 的方式计算得到 。随着行业大环境由增量市场转为存量市场&#xff0c;产品的运营要求更加精细化、更快速反应&#xff0c;这对各项数据指标的实时性要求已经越来越高。产品如果能…

WRF模式

随着生态文明建设和“碳中和”战略的持续推进&#xff0c;我国及全球气候变化及应对是政府、科学界及商业界关注的焦点。气候是多个领域&#xff08;生态、水资源、风资源及碳中和等问题&#xff09;的主要驱动因素&#xff0c;合理认知气候变化有利于解释生态环境变化机理及过…

使用SaleSmartly自动化流程的 5 个原因

想象一下&#xff0c;如果您可以采用智能数字解决方案来减轻团队和公司的手动和重复业务流程负担。它可以帮助您节省时间、提高公司的底线、消除冗余并增强数据管理。SaleSmartly&#xff08;ss客服&#xff09;就是这样。 通过利用自动化的力量&#xff0c;SaleSmartly&#x…

【Java】继承和多态

文章目录 一、继承1.继承的例子&#xff08;is-a&#xff09;2.组合的例子&#xff08;has-a&#xff09; 二、多态1.重写2.重载 三、继承的语法四、继承的注意事项1.初始化的顺序&#xff1a;2.super关键字 五、继承访问限定符六、多态实现方式七、多态的理解注意事项&#xf…

MGV2000_2+16_当贝纯净桌面卡刷固件包-内有教程

MGV2000_216_当贝纯净桌面卡刷固件包-内有教程 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0c;运行速度提…

Python爬虫入门之爬虫解析提取数据的四种方法

本文主要介绍了Python爬虫入门之爬虫解析提取数据的四种方法&#xff0c;通过具体的内容向大家展现&#xff0c;希望对大家Python爬虫的学习有所帮助。 基础爬虫的固定模式 笔者这里所谈的基础爬虫&#xff0c;指的是不需要处理像异步加载、验证码、代理等高阶爬虫技术的爬虫…