3.CSS字体属性
3.1字体系列
CSS使用font-family属性定义文本的字体系列。
p{font-family:"微软雅黑"}
div{font-family:Arial,"Microsoft Yahei",微软雅黑}
3.2字体大小
css使用font-size属性定义字体大小
p{
font-size:20px;
}
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px;
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
- 可以给body指定整个页面文字大小。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS字体属性之字体大小</title><style>body {font-size: 16px;}/* 标题标签化比较特殊，需要单独指定文字大小 */h2 {font-size: 16px;}</style>
</head>
<body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色，</p><p>优雅，淡然，又那么心中清澈。</p><p>前端总是伴随着困难和犯错，</p><p>静心，坦然，攻克一个又一个。</p><p>拼死也要克服它，</p><p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>3.3 font-weight字体粗细
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS字体属性之字体大小</title><style>.bold {/* font-weight:bold; *//* 这个700=bold *//* 实际开发中，我们更提倡使用数字，表示加粗或者变细 */font-weight: 700;}h2 {font-weight: 400;/* font-weight:normal */}</style>
</head>
<body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色，</p><p>优雅，淡然，又那么心中清澈。</p><p>前端总是伴随着困难和犯错，</p><p>静心，坦然，攻克一个又一个。</p><p class="bold">拼死也要克服它，</p><p >这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>| 属性值 | 描述 |
| normal | 默认值(不加粗的) |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同于normal,而700等同于bold 注意这个数字后面不跟单位 |
学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细
3.4 字体样式
css使用font-style属性设置文本的风格
p{
font-style:normal;
}
| 属性值 | 作用 |
| normal | 默认值，浏览器会显示标签的字体样式 font-style:normal |
| italic | 浏览器会显示斜体的字体样式 |
注意：平时我们很少给文字加斜体，反而要给斜体标签(em,i)改为不斜体字体。
3.5 字体复合属性
body {
font:font-style font-weight font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS字体属性之字体大小</title><style>.fuheziti{font: italic 700 16px microsoft yahei;}</style>
</head>
<body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色，</p><p>优雅，淡然，又那么心中清澈。</p><p>前端总是伴随着困难和犯错，</p><p>静心，坦然，攻克一个又一个。</p><p class="fuheziti">拼死也要克服它，</p><p >这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>实现效果：
相关文章：
3.CSS字体属性
3.1字体系列 CSS使用font-family属性定义文本的字体系列。 p{font-family:"微软雅黑"} div{font-family:Arial,"Microsoft Yahei",微软雅黑} 3.2字体大小 css使用font-size属性定义字体大小 p{ font-size:20px; } px(像素)大小是我们网页的最常用的单…...
微信小程序 单选多选radio/checkbox 纯代码分享
单选按钮 <radio-group class"radiogroup" bindchange"radioChange"> <label class"radio" wx:for"{{items}}"> <radio value"{{item.name}}" checked"{{item.checked}}" /> {{item.value}} &…...
k8s 部署meilisearch UI
https://github.com/riccox/meilisearch-ui 拉取镜像 sudo docker pull riccoxie/meilisearch-ui:latestk8s 部署 apiVersion: v1 kind: Service metadata:name: meilisearch-uinamespace: meilisearch spec:type: NodePortselector:app: meilisearch-uiports:- port: 24900…...
gitlab 还原合并请求
事情是这样的： 菜鸡从 test 分支切了个名为 pref-art 的分支出来，发布后一机灵，发现错了，于是在本地用 git branch -d pref-art 将该分支删掉了。之后切到了 prod 分支，再切出了一个相同名称的 pref-art 分支出来&…...
ChatGPT最新版本“o3”的概要
o3简介 o3于2024年12月20日发布——也就是OpenAI 12天直播的最后一天。目前处于安全性测试阶段。它是o1的继任者，旨在处理更复杂的推理任务。o3特别针对数学、科学和编程等领域进行了优化。 o3在多项基准测试中表现出色。例如，在ARC-AGI基准测试中&…...
uniapp——App下载文件，保存、打开文件（二）
uniapp如何下载文件、保存、打开文件 时光荏苒，2024即将过去！ 迈向2025，祝大家新的一年工作顺利、万事如意，少一点BUG，涨一点工资…↖(ω)↗ 文章目录 uniapp如何下载文件、保存、打开文件下载文件保存并打开文件处理 …...
Postman接口测试05|实战项目笔记
目录 一、项目接口概况 二、单接口测试-登录接口：POST 1、正例 2、反例 ①姓名未注册 ②密码错误 ③姓名为空 ④多参 ⑤少参 ⑥无参 三、批量运行测试用例 四、生成测试报告 1、Postman界面生成 2、Newman命令行生成 五、token鉴权（“…...
【paddle】初次尝试
张量 张量是 paddlepaddle， torch， tensorflow 等 python 主流机器学习包中唯一通货变量，因此应当了解其基本的功能。 张量 paddle.Tensor 与 numpy.array 的转化 import paddle as paddle import matplotlib.pyplot as plt apaddle.to_t…...
01-2023年上半年软件设计师考试java真题解析
1.真题内容 在某系统中，类 Interval(间隔) 代表由下界(lower bound(边界))上界(upper bound )定义的区间。 要求采用不同的格式显示区间范围。 如［lower bound , upper bound ]、[ lower bound … upper bound ]、[ lower bou nd - upper bound &#x…...
一文讲清楚CSS3新特性
文章目录 一文讲清楚CSS3新特性1. 新增选择器特性2. 新增的样式3. 新增布局方式 一文讲清楚CSS3新特性 1. 新增选择器特性 层次选择器(div~p)选择前面有div的p元素伪类选择器 :first-of-type 表示⼀组同级元素中其类型的第⼀个元素:last-of-type 表示⼀组同级元素中其类型的最…...
系统设计案例：设计 Spotify
https://levelup.gitconnected.com/system-design-interview-question-design-spotify-4a8a79697dda 这是一道系统设计面试题，即设计 Spotify。在真正的面试中，你通常会关注应用程序的一两个主要功能，但在本文中，我想从高层次概述…...
太速科技-633-4通道2Gsps 14bit AD采集PCie卡
4通道2Gsps 14bit AD采集PCie卡 一、板卡概述 二、性能指标 板卡功能 参数 内容 ADC 芯片型号 AD9689 路数 4路ADC， 采样率 2Gsps 数据位 14bit 数字接口 JESD204B 模拟接口 交流耦合 模拟输入 1V 连接器 6路 SMA 输入阻抗 50Ω 模拟指…...
图片叠加拖拽对比展示效果实现——Vue版
图片叠加拖拽对比展示效果实现——Vue版 项目中遇见一个需求：2张图片按竖线分割，左右两侧分别展示对应图片，通过滚动条拖动对应展示图片区域；; 网上搜索了下，没有找到直接可用的组件，这里自己封装了一个次功…...
结合长短期记忆网络（LSTM）和无迹卡尔曼滤波器（UKF）的技术在机器人导航和状态估计中的应用前景
结合长短期记忆网络（LSTM）和无迹卡尔曼滤波器（UKF）的技术在机器人导航和状态估计中具有广泛的应用前景。如有滤波、导航方面的代码定制需求，可通过文末卡片联系作者获得帮助 文章目录 结合LSTM和UKF的背景结合LSTM和UKF的优势应用实例研究现状MATLAB代码示例结论结合LSTM和…...
【MATLAB APP Designer】小波阈值去噪（第一期）
代码原理及流程 小波阈值去噪是一种信号处理方法，用于从信号中去除噪声。这种方法基于小波变换，它通过将信号分解到不同的尺度和频率上来实现。其基本原理可以分为以下几个步骤： （1）小波变换：首先对含噪信…...
ClickHouse副本搭建
一. 副本概述 副本的目的主要是保障数据的高可用性，ClickHouse中的副本没有主从之分。所有的副本都是平等的。 副本写入流程： 二. 副本搭建 1. 实验环境 hadoop1(192.168.47.128) hadoop2(192.168.47.129)2. 修改配置文件 修改两台主机/etc/click…...
K3知识点
提示：文章 文章目录 前言一、顺序队列和链式队列题目 顺序队列和链式队列的定义和特性实际应用场景顺序表题目 链式队列 二、AVL树三、红黑树四、二叉排序树五、树的概念题目1左子树右子树前序遍历、中序遍历，后序遍历先根遍历、中根遍历左孩子右孩子题目…...
cocos creator 3.x版本如何添加打开游戏时首屏加载进度条
前言 项目有一个打开游戏时添加载入进度条的需求。这个功能2.X版本是自带的，不知为何在3.X版本中移除了。 实现 先说一下解决思路，就是在引擎源码加载场景的位置插入一个方法，然后在游戏入口HTML处监听即可。 1.找到对应源码脚本 在coco…...
Fama MacBeth两步法与多因子模型的回归检验
Fama MacBeth两步法与多因子模型的回归检验 – 潘登同学的因子投资笔记 本文观点来自最近学习的石川老师《因子投资：方法与实践》一书 文章目录 Fama MacBeth两步法与多因子模型的回归检验 -- 潘登同学的因子投资笔记 多因子回归检验时序回归检验截面回归检验Fama–…...
IDEA 搭建 SpringBoot 项目之配置 Maven
目录 1?配置 Maven 1.1?打开 settings.xml 文件1.2?配置本地仓库路径1.3?配置中央仓库路径1.4?配置 JDK 版本1.5?重新下载项目依赖 2?配置 idea 2.1?在启动页打开设置2.2?配置 Java Compiler2.3?配置 File Encodings2.4?配置 Maven2.5?配置 Auto Import2.6?配置 C…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...