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

3.CSS字体属性

news 2026/4/4 12:31:02

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

6GB显存也能玩转AI绘画：FLUX.1-dev FP8量化模型完全指南

6GB显存也能玩转AI绘画&#xff1a;FLUX.1-dev FP8量化模型完全指南 【免费下载链接】flux1-dev 项目地址: https://ai.gitcode.com/hf_mirrors/Comfy-Org/flux1-dev 还在为显卡配置不足而无法体验AI绘画的魅力而烦恼吗&#xff1f;FLUX.1-dev FP8量化模型正是为你量身…...

编程新知 2026/4/4 12:10:21

电-热-气综合能源系统协同优化Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f447; 关注我领取海量matlab电子书和数学建模资料&#x1f34a;个人信条&#xff1a;格物致知,完整Matl…...

编程新知 2026/4/4 12:08:21

Mac窗口置顶终极指南：用Topit解锁你的多任务超能力 [特殊字符]

Mac窗口置顶终极指南&#xff1a;用Topit解锁你的多任务超能力 &#x1f680; 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 还在为频繁切换窗口而烦恼&#x…...

编程新知 2026/4/4 8:42:38

UABEA：Unity游戏资源编辑与分析的终极解决方案

UABEA&#xff1a;Unity游戏资源编辑与分析的终极解决方案 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 在Unity游戏开发和模组制作领域&#xff0c;处理Asset Bundle资源文件是每个开发者都会面临的…...

编程新知 2026/4/4 8:02:15

突破百度网盘限速：Python直链解析工具使用指南

突破百度网盘限速&#xff1a;Python直链解析工具使用指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘下载速度缓慢而烦恼吗&#xff1f;今天我们将介绍一款…...

编程新知 2026/4/4 7:42:01

WSL2+VSCode+Github Copilot开发环境配置全指南（避坑版）

WSL2VSCodeGithub Copilot开发环境配置全指南&#xff08;避坑版&#xff09; 在当今的开发环境中&#xff0c;Windows Subsystem for Linux 2 (WSL2) 已经成为许多开发者的首选工具&#xff0c;它完美结合了Windows的易用性和Linux的强大功能。而Visual Studio Code (VSCode)…...

编程新知 2026/4/4 7:23:56

Z-Image Turbo本地化部署：数据安全与隐私保护方案

Z-Image Turbo本地化部署&#xff1a;数据安全与隐私保护方案 1. 项目概述与核心价值 Z-Image Turbo是一个基于Gradio和Diffusers构建的高性能AI绘图Web界面&#xff0c;专门为Z-Image-Turbo模型优化设计。在当今数据安全意识日益增强的环境下&#xff0c;本地化部署成为保护…...

编程新知 2026/4/4 6:31:42

Qwen3.5-2B轻量部署教程：适配Jetson/树莓派的2B多模态模型实测

Qwen3.5-2B轻量部署教程&#xff1a;适配Jetson/树莓派的2B多模态模型实测 1. 模型概述 Qwen3.5-2B是阿里云推出的轻量化多模态基础模型&#xff0c;属于Qwen3.5系列的小参数版本&#xff08;20亿参数&#xff09;。这个模型专为边缘计算设备优化&#xff0c;主打低功耗、低门…...

编程新知 2026/4/4 5:47:08

身份治理技术：从手动到AI的变革，实现Linux的ssh免密登录实操保姆级教程。

身份治理技术的演进历程 身份治理技术&#xff08;Identity Governance&#xff09;是企业IT架构中确保用户身份、权限和访问控制合规性的核心组件。从早期的手动管理到现代的智能自动化&#xff0c;其演进历程反映了安全需求和技术能力的双重驱动。 早期阶段&#xff1a;手动管…...

编程新知 2026/4/4 5:43:07

OpenClaw+Qwen3-14B私有镜像实战：飞书机器人自动回复配置指南

OpenClawQwen3-14B私有镜像实战&#xff1a;飞书机器人自动回复配置指南 1. 为什么选择这个组合&#xff1f; 上周三凌晨2点&#xff0c;我被飞书消息提示音吵醒——团队新人又在加班调试代码。这已经是本周第三次了。作为技术负责人&#xff0c;我意识到需要一种更智能的解决…...

编程新知 2026/4/4 4:26:04