当前位置： 首页 > news >正文

3.CSS字体属性

news 2026/5/20 17:39:37

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-900400等同于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(像素)大小是我们网页的最常用的单…...

编程日记 2025/1/1 22:22:12

微信小程序 单选多选radio/checkbox 纯代码分享

单选按钮 <radio-group class"radiogroup" bindchange"radioChange"> <label class"radio" wx:for"{{items}}"> <radio value"{{item.name}}" checked"{{item.checked}}" /> {{item.value}} &…...

编程日记 2025/1/1 22:20:09

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…...

编程日记 2025/1/1 22:17:59

gitlab 还原合并请求

事情是这样的&#xff1a; 菜鸡从 test 分支切了个名为 pref-art 的分支出来&#xff0c;发布后一机灵&#xff0c;发现错了&#xff0c;于是在本地用 git branch -d pref-art 将该分支删掉了。之后切到了 prod 分支&#xff0c;再切出了一个相同名称的 pref-art 分支出来&…...

编程日记 2025/1/1 22:11:48

ChatGPT最新版本“o3”的概要

o3简介 o3于2024年12月20日发布——也就是OpenAI 12天直播的最后一天。目前处于安全性测试阶段。它是o1的继任者&#xff0c;旨在处理更复杂的推理任务。o3特别针对数学、科学和编程等领域进行了优化。 o3在多项基准测试中表现出色。例如&#xff0c;在ARC-AGI基准测试中&…...

编程日记 2025/1/1 22:07:44

uniapp——App下载文件，保存、打开文件（二）

uniapp如何下载文件、保存、打开文件 时光荏苒&#xff0c;2024即将过去&#xff01; 迈向2025&#xff0c;祝大家新的一年工作顺利、万事如意&#xff0c;少一点BUG&#xff0c;涨一点工资…↖(ω)↗ 文章目录 uniapp如何下载文件、保存、打开文件下载文件保存并打开文件处理 …...

编程日记 2025/1/1 22:05:42

Postman接口测试05|实战项目笔记

目录 一、项目接口概况 二、单接口测试-登录接口&#xff1a;POST 1、正例 2、反例 ①姓名未注册 ②密码错误 ③姓名为空 ④多参 ⑤少参 ⑥无参 三、批量运行测试用例 四、生成测试报告 1、Postman界面生成 2、Newman命令行生成 五、token鉴权&#xff08;“…...

编程日记 2025/1/1 22:04:41

【paddle】初次尝试

张量 张量是 paddlepaddle&#xff0c; torch&#xff0c; tensorflow 等 python 主流机器学习包中唯一通货变量&#xff0c;因此应当了解其基本的功能。 张量 paddle.Tensor 与 numpy.array 的转化 import paddle as paddle import matplotlib.pyplot as plt apaddle.to_t…...

编程日记 2025/1/1 22:00:37

01-2023年上半年软件设计师考试java真题解析

1.真题内容 在某系统中&#xff0c;类 Interval(间隔) 代表由下界(lower bound(边界))上界(upper bound )定义的区间。 要求采用不同的格式显示区间范围。 如&#xff3b;lower bound , upper bound ]、[ lower bound … upper bound ]、[ lower bou nd - upper bound &#x…...

编程日记 2025/1/1 21:59:36

一文讲清楚CSS3新特性

文章目录 一文讲清楚CSS3新特性1. 新增选择器特性2. 新增的样式3. 新增布局方式 一文讲清楚CSS3新特性 1. 新增选择器特性 层次选择器(div~p)选择前面有div的p元素伪类选择器 :first-of-type 表示⼀组同级元素中其类型的第⼀个元素:last-of-type 表示⼀组同级元素中其类型的最…...

编程日记 2025/1/1 21:57:32

系统设计案例：设计 Spotify

https://levelup.gitconnected.com/system-design-interview-question-design-spotify-4a8a79697dda 这是一道系统设计面试题&#xff0c;即设计 Spotify。在真正的面试中&#xff0c;你通常会关注应用程序的一两个主要功能&#xff0c;但在本文中&#xff0c;我想从高层次概述…...

编程日记 2025/1/1 21:54:29

太速科技-633-4通道2Gsps 14bit AD采集PCie卡

4通道2Gsps 14bit AD采集PCie卡 一、板卡概述 二、性能指标 板卡功能 参数 内容 ADC 芯片型号 AD9689 路数 4路ADC&#xff0c; 采样率 2Gsps 数据位 14bit 数字接口 JESD204B 模拟接口 交流耦合 模拟输入 1V 连接器 6路 SMA 输入阻抗 50Ω 模拟指…...

编程日记 2025/1/1 21:53:26

图片叠加拖拽对比展示效果实现——Vue版

图片叠加拖拽对比展示效果实现——Vue版 项目中遇见一个需求&#xff1a;2张图片按竖线分割&#xff0c;左右两侧分别展示对应图片&#xff0c;通过滚动条拖动对应展示图片区域&#xff1b;; 网上搜索了下&#xff0c;没有找到直接可用的组件&#xff0c;这里自己封装了一个次功…...

编程日记 2025/1/1 21:52:23

结合长短期记忆网络（LSTM）和无迹卡尔曼滤波器（UKF）的技术在机器人导航和状态估计中的应用前景

结合长短期记忆网络（LSTM）和无迹卡尔曼滤波器（UKF）的技术在机器人导航和状态估计中具有广泛的应用前景。如有滤波、导航方面的代码定制需求，可通过文末卡片联系作者获得帮助 文章目录 结合LSTM和UKF的背景结合LSTM和UKF的优势应用实例研究现状MATLAB代码示例结论结合LSTM和…...

编程日记 2025/1/1 21:49:18

【MATLAB APP Designer】小波阈值去噪（第一期）

代码原理及流程 小波阈值去噪是一种信号处理方法&#xff0c;用于从信号中去除噪声。这种方法基于小波变换&#xff0c;它通过将信号分解到不同的尺度和频率上来实现。其基本原理可以分为以下几个步骤&#xff1a; &#xff08;1&#xff09;小波变换&#xff1a;首先对含噪信…...

编程日记 2025/1/1 21:46:08

ClickHouse副本搭建

一. 副本概述 副本的目的主要是保障数据的高可用性&#xff0c;ClickHouse中的副本没有主从之分。所有的副本都是平等的。 副本写入流程&#xff1a; 二. 副本搭建 1. 实验环境 hadoop1(192.168.47.128) hadoop2(192.168.47.129)2. 修改配置文件 修改两台主机/etc/click…...

编程日记 2025/1/1 21:45:07

K3知识点

提示&#xff1a;文章 文章目录 前言一、顺序队列和链式队列题目 顺序队列和链式队列的定义和特性实际应用场景顺序表题目 链式队列 二、AVL树三、红黑树四、二叉排序树五、树的概念题目1左子树右子树前序遍历、中序遍历&#xff0c;后序遍历先根遍历、中根遍历左孩子右孩子题目…...

编程日记 2025/1/1 21:43:05

cocos creator 3.x版本如何添加打开游戏时首屏加载进度条

前言 项目有一个打开游戏时添加载入进度条的需求。这个功能2.X版本是自带的&#xff0c;不知为何在3.X版本中移除了。 实现 先说一下解决思路&#xff0c;就是在引擎源码加载场景的位置插入一个方法&#xff0c;然后在游戏入口HTML处监听即可。 1.找到对应源码脚本 在coco…...

编程日记 2025/1/1 21:42:04

Fama MacBeth两步法与多因子模型的回归检验

Fama MacBeth两步法与多因子模型的回归检验 – 潘登同学的因子投资笔记 本文观点来自最近学习的石川老师《因子投资&#xff1a;方法与实践》一书 文章目录 Fama MacBeth两步法与多因子模型的回归检验 -- 潘登同学的因子投资笔记 多因子回归检验时序回归检验截面回归检验Fama–…...

编程日记 2025/1/1 21:38:00

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…...

编程日记 2025/1/1 21:35:58

基于MCP3421高精度ADC的电池电量监测方案设计与实践

1. 项目概述&#xff1a;为什么需要一个专用的电量监测板&#xff1f;在嵌入式开发和物联网设备中&#xff0c;电池供电是常态。无论是手持仪表、无线传感器节点还是便携式医疗设备&#xff0c;准确掌握电池的剩余电量&#xff0c;就像司机需要时刻关注油表一样&#xff0c;是确…...

编程新知 2026/5/20 13:37:26

5分钟学会在Windows电脑上安装Android应用：APK Installer终极指南

5分钟学会在Windows电脑上安装Android应用&#xff1a;APK Installer终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 想在Windows电脑上运行手机应用吗&#x…...

编程新知 2026/5/20 12:50:24

边缘网络：构建边缘计算的网络基础设施

边缘网络&#xff1a;构建边缘计算的网络基础设施 一、边缘网络概述 1.1 边缘网络的定义 边缘网络是指部署在网络边缘的网络基础设施&#xff0c;它将计算、存储和网络资源扩展到离用户更近的位置。边缘网络支持低延迟数据处理、实时响应和分布式计算&#xff0c;是边缘计算的关…...

编程新知 2026/5/20 11:47:48

Unity 2D基础：Rigidbody2D刚体的运动控制

Unity 2D基础&#xff1a;Rigidbody2D刚体的运动控制&#x1f4da; 本章学习目标&#xff1a;深入理解Rigidbody2D刚体的运动控制的核心概念与实践方法&#xff0c;掌握关键技术要点&#xff0c;了解实际应用场景与最佳实践。本文属于《Unity工程师成长之路教程》Unity 2D基础篇…...

编程新知 2026/5/20 11:37:22

设计饮用水水质饮用习惯监测程序，统计每日饮水量，提醒科学补水养成健康习惯。

饮用水水质与饮水习惯监测程序——基于日志与规则的健康行为实验系统一、实际应用场景描述在现代城市生活中&#xff0c;很多人存在以下问题&#xff1a;- 不清楚自己每天喝了多少水- 饮水时间集中在晚上或运动后- 长期饮水不足或过量- 对水质来源缺乏基本记录意识本项目的目标…...

编程新知 2026/5/20 10:46:38

告别Keil！用Clion+STM32CubeMX搭建C++开发环境（附LED闪烁实战）

告别Keil&#xff01;用ClionSTM32CubeMX搭建C开发环境&#xff08;附LED闪烁实战&#xff09; 嵌入式开发领域正经历一场工具链的现代化变革。对于习惯了Keil这类传统IDE的STM32开发者而言&#xff0c;JetBrains推出的Clion无疑是一股清新之风——它不仅具备智能代码补全、重…...

编程新知 2026/5/20 10:24:24

Jenkins 安装Publish over SSH插件远程发布执行shell脚本

1.在jenkins安装Publish over SSH插件&#xff0c;在Manage Jenkins–Plugins–Available plugins中搜索Publish over SSH&#xff0c;然后安装即可。2.安装成功以后&#xff0c;需要到系统设置DashBoard—Manage Jenkins—System中进行配置&#xff0c;如图 可以通过密码链接也…...

编程新知 2026/5/20 10:07:44

硬件入门 + 单片机基础（第17天）云端物模型自定义

一、阿里云后台配置&#xff08;添加 3 个标准属性&#xff09;1. 进入物模型编辑页物联网平台 → 对应产品 → 功能定义 → 编辑物模型2. 逐个添加属性温度功能类型&#xff1a;设备属性功能名称&#xff1a;温度标识符&#xff1a;Temperature数据类型&#xff1a;浮点型&…...

编程新知 2026/5/20 9:02:58

量子计算中数据驱动的哈密顿修正方法研究

1. 量子门控中的哈密顿修正挑战在量子计算领域&#xff0c;超导transmon比特因其相对较长的相干时间和可扩展性&#xff0c;成为当前最有前景的量子处理器实现方案之一。然而&#xff0c;实际硬件中存在的器件间差异和串扰效应&#xff0c;使得基于理论模型的脉冲设计与真实硬件…...

编程新知 2026/5/20 8:32:55

碳感知Transformer与硬件协同优化框架解析

1. CATransformers&#xff1a;碳感知Transformer与硬件协同优化框架解析在AI技术快速发展的今天&#xff0c;Transformer模型已成为自然语言处理、计算机视觉和多模态任务的核心架构。然而&#xff0c;这些模型的广泛部署带来了显著的碳排放问题——不仅包括训练和推理过程中的…...

编程新知 2026/5/20 8:03:11