【CSS入门】第五课 - font字体
这一节,我们说一说font这个字体。做网页开发,网页中几乎不可能没有文字的,为了使网页更漂亮,用户体验更好。人们可算是绞尽脑汁,其中一部分就是在字体上下的大功夫。
接下来,我们学习一下,font字体在css中的设置
目录
1 浏览器默认字体是什么样的?
2 font-family
2.1 为什么要设置字体?
3 font-style
4 font-weight
5 字体大小 font-size
5.1 px
5.2 vw
5.3 rem
6 最后
1 浏览器默认字体是什么样的?
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><div class="box">我们来学习一下字体</div></body>
</html>
我们就写了一个标签,什么样式也没有。那么我们看一下,他的大小,色值,和字体都是什么样子的呢?

想要测试这3种属性值,我们对应着添加一些属性看看不就可以了,对吧。
其实你可以自己测试一下,
- 文字大小默认是16px;
- 色值是 黑色,色值是 #000;
- 默认字体是 Microsoft YaHei
也就是这样:
.box {font-size: 16px;font-family: Microsoft YaHei;color: #000;
}
你可以试着改变一下这些属性值,然后再修改回来,然后再删掉,如果你是windows电脑,应该就是这样子的。
2 font-family
我们在做网站开发的时候,很多公司为了彰显企业文化,会自己设计一些字体,或者用一些免费的其他人设计出来的字体。
通过修改font-family的属性值,就可以使文字看上去,字体有所改变:
.box {font-size: 16px;font-family: "隶书";color: #000;
}

是不是不太一样了,你还可以试着从网上找找其他字体,或者从自己的电脑的word文档里,看看你电脑上安装的其他字体,看看效果。
2.1 为什么要设置字体?
既然不设置字体,网页也会有个默认的显示,那么为什么还要设置这个font-family呢?很多电脑,他的默认字体不定都是这个 英文的微软雅黑,甚至如果你用了中文的“微软雅黑”,还会受到某公司的侵权投诉,这个中文版的是有版权的,不能乱用。
而且,你看很多人的手机字体,还是非主流那种的,或者各种各样的,所以,需要设置一个默认字体,使其生效。这样,网站就会无论在哪种机型环境下,字体都显示的风格统一了。
3 font-style
通过设置font-style,可以使字体倾斜起来,就像我们之前说的 i 标签一样。
.box {font-size: 16px;font-family: Microsoft YaHei;color: #000;font-style: italic;
}

倾斜是使用 font-style: italic; 来设置的,默认不倾斜的属性值是 normal
4 font-weight
font-weight呢,是来设置文字的粗细程度的。比如你可以设置属性值为: 300 400 600 normal bold lighter 等,就像这样:
.box {font-size: 16px;font-family: Microsoft YaHei;color: #000;font-style: italic; font-weight: bold;
}
5 字体大小 font-size
5.1 px
font-size 呢,我们刚才说默认是16px的大小,对吧。这个像素呢,是根据我们屏幕宽度来设定的,比如之前,人们的屏幕分辨率是 1024 * 768,那么我们设置一个文字的大小如果是100px,那差不多就是占 十分之一 个屏幕的宽度了,这个时候,一行也就是放10个字就占满了。
那么现在很多人屏幕是1920的宽度,那如果设置以为100px的文字,那可能就可以放19个才能占满一行了。
5.2 vw
vw呢,是一个相对于浏览器宽度的相对大小设置。什么是相对大小呢,就是我们的浏览器宽度大一些,1vw就大一些,浏览器宽度小一些,1vw就想对小写。
你可以这样设置:
.box {font-size: 2vw;font-family: Microsoft YaHei;color: #000;
}
然后你可以试着缩放浏览器,让浏览器宽一些,后者收窄一些,试试文字跟着改变大小的效果。
5.3 rem
rem呢,他其实并不是一个相对单位,但我们可以做成自适应的可变的相对单位。
怎么理解呢?我们先来看一下他怎么用
html {font-size: 62.5%;
}
.box {font-size: 1.6rem;font-family: Microsoft YaHei;color: #000;
}
- 使用方法呢,就是给根元素设置font-size: 62.5%;什么是根元素?就是html标签。
- 然后我们日常开发的标签们,默认不是16px嘛,这里的1.6rem就是16px大小了。你可以拿着这段代码,去自己的电脑上试一下。
- 如果需要设置为24px,那么就直接写2.4rem就可以了。
那么如何达到响应式的呢?这说白了不还是多少多少像素嘛?
可以检测浏览器的宽度嘛,我们默认一个浏览器宽度,比如移动端开发的时候,默认成750的宽度,你的屏幕如果检测到大于750,直接把这个html标签的这个百分比调整了,整体的字体不就改变了。
当然,这涉及到后面的JS相关知识,我们也是先了解一下。不过你可以提前先给html标签的这个百分比改一下,看看效果。给后面的JS学习打个基础。
6 最后
我们这一节,说了font这个字体的一些设置,后面呢说了3种常用的设置字体大小的方式。其实字体大小还有其他的设置,不过你先掌握了这3种,几乎就可以应对90%的工作了。
而且如果这3种熟练了,自学其他的em啦,%(百分比)啦,rpx啦,就手到擒来了。
相关文章:
【CSS入门】第五课 - font字体
这一节,我们说一说font这个字体。做网页开发,网页中几乎不可能没有文字的,为了使网页更漂亮,用户体验更好。人们可算是绞尽脑汁,其中一部分就是在字体上下的大功夫。 接下来,我们学习一下,font…...
STM32-门电路-储存器-寄存器-STM32f1-MCU-GPIO-总线-keil5-点led-寄存器编程
1、门电路 门电路组成简单加法器: 二进制对电路的影响: 0和1代表无和有; 以下图例,演示与门:左1右1输出1; 电平标准:使用不同的电压表示数字0和1; 高电平:1࿱…...
【动态规划算法题记录】343. 整数拆分 | 96.不同的二叉搜索树
整数拆分 题目🔗 题目描述 给定一个正整数 n ,将其拆分为 k个正整数的和(k > 2),并使这些整数的乘积最大化。 返回你可以获得的最大乘积 。 思路分析 dp数组含义:dp[i]表示整数i拆分后的最大乘积。…...
网页上预览Excel文件
如何运行: 需要发布在服务器 如Tomcat 实例图片: 需要展示的文件: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>excel预览</title><link rel"stylesheet" href"…...
Unity射击游戏开发教程:(31)制造一定追踪行为的敌人
在本文中,我们将介绍如何在两种敌人行为之间切换。本文是前两篇文章的延续,分别介绍了敌人躲避玩家射击以及敌人不断旋转并向玩家射击的情况。我只是介绍如何在这两种行为之间进行转换。 这种新的敌人行为的目标: 当不开火时,敌人可以躲避玩家的射击。射击时,敌人无法躲避…...
springboot mybatis plus 固定查询条件及可选查询条件的组合查询,使用QueryWrapper.and()来解决。
1、我们在写查询SQL的时候,经常会碰到,比如,同一个类别下的某一个编号的物料信息,或者是同一批次的物料库存问题等等。 所属类别fid物料编号bm物料批次pc110.01.0220240807110.01.0320240807 210.02.0120240805 2、那么我…...
使用ollama取代openai的api进行graphRAG失败记录
pip install ollama pip install langchain_ollama graph_documents llm_transformer.convert_to_graph_documents(split_documents) print(graph_documents) 偶尔会成功,但是大部分是失败的: 报错记录如下,暂时没想到好的办法ÿ…...
MyBatis 配置与测试方式
目录 一,什么是MyBatis 二,准备工作 创建项目 配置数据库连接 持久层代码 单元测试 一,什么是MyBatis 简单来说,MyBatis 是一款优秀的持久层框架,用于简化JDBC的开发,能更简单完成程序与数据库之间…...
C#实现代理服务器
在C#中实现一个简单的代理服务器,可以使用System.Net.Sockets命名空间下的TcpListener类来监听客户端的连接请求,并使用TcpClient来处理与客户端的通信。以下是一个简单的代理服务器示例: using System; using System.IO; using System.Net;…...
react的路由实战使用
环境配置:vitetsreact18 1、安装包 npm i react-router-dom 2、 根路由配置以及路由挂载 a、在src下面创建router文件夹配置简单的路由信息: router/index.tsx import { createBrowserRouter } from "react-router-dom"; import UserLogin…...
python 字典转成类 构建类
目录 python 字典转成类 复杂嵌套示例: 动态实例化类 太好用了! python 字典转成类 class DictToClass:def __init__(self, dictionary):for key, value in dictionary.items():if isinstance(value, dict):# 如果值是字典,递归转换为类的实例setattr(self, key, DictToC…...
springboot 过滤器
1、过滤器的实现 springboot中过滤器通过实现接口Filter并重写init、doFilter、destroy三个方法。在三个方法中加入自己的业务逻辑处理。 【注意】Filter接口的完整包名在不同的jdk版中中的变化。这里示例中使用的版本为 open-jdk17。完整名称 jakarta.servlet.Filter。如果使…...
【C语言篇】深入理解指针1
文章目录 内存和地址内存编址 指针变量和地址取地址操作符指针变量和解引用操作符指针变量指针变量类型解引用操作符指针变量的大小 指针变量类型的意义指针的解引用指针-整数void*指针 const修饰指针指针运算指针-整数指针-指针指针的关系运算 野指针野指针成因如何规避野指针…...
IAP程序升级 与 电脑BIOS 的关系
IAP (In-Application Programming) 程序升级 IAP程序升级是一种技术,允许设备在运行过程中更新其自身的固件或软件,而不需要外部工具或设备的介入。这种技术特别适用于嵌入式系统和物联网(IoT)设备。其主要由三部分构成࿰…...
Java使用MQTT协议
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议)是一种轻量级的、基于发布/订阅模式的物联网通信协议。它构建于TCP/IP协议之上,由IBM在1999年发布。MQTT的主要特点包括: 轻量级与高效:M…...
等级+时间的优先级算法
简介 本算法为等级与时间结合计算对应优先级逻辑 等级越高者优先级越高 同等级下,时间越小者优先级越高 实现 主方法 calculatePriority import com.zk.blog.enums.TypeEnum; import org.apache.commons.lang3.StringUtils;/*** program: * description:* autho…...
物流仓库安全视频智能管理方案:构建全方位、高效能的防护体系
一、背景分析 随着物流行业的快速发展和仓储需求的日益增长,仓库安全成为企业运营中不可忽视的重要环节。传统的人工监控方式不仅效率低下,且难以做到全天候、无死角覆盖,给仓库资产和人员安全带来潜在风险。因此,引入仓库安全视…...
jackson反序列化漏洞
jackson反序列化漏洞 反序列化漏洞触发根因jackson介绍jackson反序列化漏洞关键点enableDefaultTypingactivateDefaultTypingJsonTypeInfo 漏洞触发场景漏洞复现环境引入依赖pocactivateDefaultTypingenableDefaultTypingJsonTypeInfo 参考 很久没写blog,最近慢慢开…...
Java | Leetcode Java题解之第328题奇偶链表
题目: 题解: class Solution {public ListNode oddEvenList(ListNode head) {if (head null) {return head;}ListNode evenHead head.next;ListNode odd head, even evenHead;while (even ! null && even.next ! null) {odd.next even.nex…...
100 Exercises To Learn Rust 挑战!准备篇
公司内部的学习会非常活跃!我也参与了Rust学习会,并且一直在研究rustlings。最近,我发现了一个类似于rustlings的新教程网站:Welcome - 100 Exercises To Learn Rust。 rustlings是基于Rust的权威官方文档《The Rust Programming…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
