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

3.CSS字体属性

news 来源：原创 2025/7/18 16:08:25

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

编程日记 2025/7/18 16:08:25

使用PyTorch实现的二分类模型示例，综合了CNN、LSTM和Attention技术

以下是一个使用PyTorch实现的二分类模型示例，综合了CNN、LSTM和Attention技术，并尝试满足你提出的各项需求： 1. 数据预处理扩充输入数据维度假设你的原始数据是二维的（例如图像或序列数据），可以通过一些变换来扩充维度。例如，对于图像数据，可以进行翻转、旋转、缩放…...

编程日记 2025/7/16 21:05:35

[Wi-Fi]802.11u Vs hotspot2.0

介绍 802.11u 和 Hotspot 2.0 是两个相关但不同的技术标准，它们都旨在改善无线网络的用户体验，特别是在公共 Wi-Fi 环境中。 802.11u 定义：802.11u 是 IEEE 802.11 标准的一个扩展，专注于增强无线网络的互操作性和用户体验。功能…...

编程日记 2025/7/18 16:00:28

VisualStudio 2019 升级遇到的问题及解决

事件起因今天计划想研究下.net core（后面版本直接称为 .net ）,发现 .net sdk 5.0 最新版本安装不成功。解决之后，真是手欠，看着Visual Studio 2019 有更新了，就直接点击了，这时才发现问题大了。。。安装…...

编程日记 2025/7/18 16:01:54

Java - 日志体系_Simple Logging Facade for Java (SLF4J)日志门面_SLF4J集成logback 及原理分析

文章目录 Pre官网集成步骤POM依赖使用第一步：编写 Logback 的配置文件第二步：在代码中使用 SLF4J 原理分析1. 获取对应的 ILoggerFactory2. 根据 ILoggerFactory 获取 Logger 实例3. 日志记录过程小结 Pre Java - 日志体系_Apache Commons Logging&…...

编程日记 2025/7/18 15:36:11

机器学习-方案设计题（在线医疗诊断项目）

在一个在线医疗诊断项目中，我们希望利用机器学习算法来预测患者是否患有某种疾病。请设计一个方案，包括数据收集、预处理、特征选择、模型选择和评估等步骤来完成这个任务。 1.数据收集数据来源 ‌电子病历系统‌：收集患者的基本信息&…...

编程日记 2025/7/18 16:00:28

基于Sentinel的服务保护方案的三种方式（请求限流、线程隔离、服务熔断）超详细讲解

目录 1、三种方式介绍 1.1请求限流 1.2 线程隔离方案 1.3 服务熔断 2、基于sentinel实现 2.1 启动sentinel 2.2 基于springboot整合sentinel 2.2.1请求限流 2.2.2请求隔离 2.2.2.1 OpenFeign整合Sentinel 2.2.3 服务熔断 2.2.3.1 编写降级代码 2.2.3.2 服务熔断 1、…...

编程日记 2025/7/15 5:29:20

[开源]C++代码分享

一，声明被人水平有限，开源只是为了分享。勿喷！！！还请大佬指点。二，代码 // --------------------------------------------------------- 头文件 ----------------------------------------------- #in…...

编程日记 2025/7/15 18:12:16

vulnhub ica1

搭建靶机跟之前一样不过这个要修改一下网卡;下面链接有教程 vulnhub jangow靶机-CSDN博客 1.扫描靶机IP arp-scan -l 192.168.47.135 2.信息收集 nmap -sS 192.168.47.135 访问网站这个是一个web应用，框架是qdpm 9.2 在kali上搜索一下发现有两个漏洞&#x…...

编程日记 2025/7/18 15:53:02

Linux(Centos 7.6)基础命令/常用命令说明

1.目录相关命令命令命令说明pwd用于显示/打印当前目录位置。ls/ll 列出当前目录下的文件或者目录，ll是ls -l的别名，ls仅显示名称，ll会显示详细的目录文件信息。 cd目录切换，常见用法有，cd /切换到根目录，…...

编程日记 2025/7/18 15:33:54

Solon 加入 GitCode：助力国产 Java 应用开发新飞跃

在当今数字化快速发展的时代，Java 应用开发框架不断演进，开发者们始终在寻找更快、更小、更简单的解决方案。近期，Solon 正式加入 GitCode，为广大 Java 开发者带来全新的开发体验，尤其是在国产应用开发进程中&#xff…...

编程日记 2025/7/17 23:31:50

Browser Use：AI智能体自动化操作浏览器的开源工具

Browser Use：AI智能体自动化操作浏览器的开源工具 Browser Use 简介1. 安装所需依赖2. 生成openai密钥3. 编写代码4. 运行代码5. 部署与优化5.1 部署AI代理5.2 优化与扩展总结Browser Use 简介 browser-use是一个Python库，它能够帮助我们将AI代理与浏览器自动化操作结合起来；…...

编程日记 2025/7/18 15:54:12

ArcGIS中怎么进行水文分析？（思路介绍）

最近有人咨询，ArcGIS中怎么进行水文分析，大致的说一下河网提取的思路哈解决思路：dem填洼→计算水流方向→计算水流累积矩阵→形成河网 dem填洼计算水流方向计算水流累积矩阵用栅格计算器，设阈值（自己多次尝试&…...

编程日记 2025/7/13 18:44:45

2024年中国新能源汽车用车发展怎么样 PaperGPT（一）

概述在国家政策的强力扶持下，2024年中国新能源汽车市场迎来了新的发展机遇。本文将基于《中国新能源汽车用车报告（2024年）》的数据，对新能源汽车的市场发展和用车趋势概述。新能源汽车市场发展政策推动：国家和地…...

编程日记 2025/7/18 15:58:07

KubeOS

title: 探秘 KubeOS：云原生操作系统的创新先锋 date: ‘2024-12-31’ category: blog tags: KubeOS云原生操作系统容器编排 sig: CloudNative archives: ‘2024-12’ author:way_back summary: KubeOS 作为一款专为云原生应用打造的操作系统，深度集成了…...

编程日记 2025/7/18 15:47:35

html文件通过script标签引入外部js文件，但没正确加载的原因

移动端H5应用，html文件通过script标签引入外部js文件，但没正确加载，在移动设备上难以排查。通过PC浏览器打开，发现js被阻止了：blocked:mixed-content。原因在于： “blocked:mixed - content” 是浏览器的…...

编程日记 2025/7/18 15:43:24

[创业之路-225]：《华为闭环战略管理》-4-华为的商业智慧：在价值链中探索取舍之道与企业边界

目录一、在价值链中探索取舍之道与企业边界价值链的深刻洞察取舍之道：有所为，有所不为垂直整合与横向整合的平衡企业边界与活动边界的界定采购与外包的智慧运用结语二、企业外部价值流：上游、中游、下游、终端上游&#xf…...

编程日记 2025/7/18 15:59:13

让 Agent 具备语音交互能力：技术突破与应用前景（16/30）

让 Agent 具备语音交互能力：技术突破与应用前景一、引言在当今数字化时代，人机交互方式正经历着深刻的变革。从早期的命令行界面到图形用户界面，再到如今日益普及的语音交互，人们对于与机器沟通的便捷性和自然性有了更高的追求…...

编程日记 2025/7/14 23:46:47

代理IP助力VR行业革新，小派科技引领技术潮流

随着VR行业的新一轮技术升级，更高分辨率、更宽视场角以及更舒适的佩戴体验已成为各大厂商竞争的核心。在这一浪潮中，小派科技凭借其最新发布的视网膜级VR头显——Crystal Super，成功吸引了市场的目光。而在这场技术革新的背后，代理…...

编程日记 2025/7/17 22:02:36

C#Halcon图像处理畸变校正之曲面校正

图像校正场景一般有两种，其一由镜头本身或安装角度引起，其二是被拍摄物品本身引起理论处理流程我的处理处理流程 1，加载网格校正图像 2，确定符合条件的网格区域 3，显示网格鞍点 4，显示网格线 5&#xff…...

编程日记 2025/7/18 16:00:28

JSON结构快捷转XML结构API集成指南

JSON结构快捷转XML结构API集成指南引言在当今的软件开发世界中，数据交换格式的选择对于系统的互操作性和效率至关重要。JSON（JavaScript Object Notation）和XML（eXtensible Markup Language）是两种广泛使用的数据表…...

编程日记 2025/7/16 8:30:40

Coroutine 基础四 —— CoroutineScope 与 CoroutineContext

1、定位 CoroutineContext，协程上下文。协程用到的所有信息都属于协程上下文，根据功能不同，划分成了不同的分类。管理流程用的是 Job，管理线程用的是 ContinuationInterceptor，等等。 CoroutineScope 的定位有两点&a…...

编程日记 2025/7/14 5:12:33

科技云报到：洞见2025年科技潮流，技术大融合开启“智算时代”

科技云报到原创。随着2024年逐渐接近尾声，人们不禁开始展望即将到来的2025年。这一年，被众多科技界人士视为开启新纪元的关键节点。站在新的起点上，我们将亲眼目睹未来科技如何改变我们的世界。从人工智能到量子计算，从基因编辑…...

编程日记 2025/7/16 8:29:52

MySQL有哪些锁？

1.MySQL有哪些锁？ 全局锁表级锁表锁元数据锁意向锁行级锁记录锁间隙锁临键锁临时意向锁我了解的是MySQL的锁可以分为全局锁、表级锁、行级锁。我比较熟悉的是表级锁和行级锁，如果我们对表结构进行修改时，MySQL就会对这个表结构加一个…...

编程日记 2025/7/18 15:46:27

通过交叉实现数据触底分页效果new IntersectionObserver（）（html、react、vue2、vue3）中使用

react中用法 import React, { useState, useEffect, useRef } from react;const InfiniteScroll () > {const [items, setItems] useState([]);const [loading, setLoading] useState(false);const [page, setPage] useState(1);const loaderRef useRef(null);// 模拟…...

编程日记 2025/7/12 23:31:19

DeepSeek-V3-Base 模型技术解析

DeepSeek-V3-Base 模型技术解析目录引言DeepSeek-V3-Base 模型概述模型架构 3.1 Transformer 基础3.2 DeepSeek-V3-Base 的改进训练过程 4.1 数据预处理4.2 训练策略4.3 优化器与学习率调度模型性能评估 5.1 基准测试5.2 实际应用案例模型优化与调参 6.1 超参数调优6.2 …...

编程日记 2025/7/16 5:47:51

Qt5 中 QGroupBox 标题下沉问题解决

我们设置了QGroupBox 样式之后，发现标题下沉了，那么如何解决呢？ QGroupBox {font: 12pt "微软雅黑";color:white;border:1px solid white;border-radius:6px; } 解决后的效果下面是解决方法： QGroupBox {font: 12pt "微软雅黑";color:white;bo…...

编程日记 2025/7/18 16:04:47

Linux Debian安装ClamAV和命令行扫描病毒方法，以及用Linux Shell编写了一个批量扫描病毒的脚本

ClamAV是一个开源的跨平台病毒扫描引擎，用于检测恶意软件、病毒、木马等安全威胁。一、Linux Debian安装ClamAV 在Linux Debian系统上安装ClamAV，你可以按照以下步骤进行： 更新软件包列表： 打开终端并更新你的软件包列表&#…...

编程日记 2025/7/17 15:18:06

数据结构与算法之动态规划: LeetCode 53. 最大子数组和 (Ts版)

最大子数组和 https://leetcode.cn/problems/maximum-subarray/description/ 描述给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和子数组是数组中的一个连续部分示例 1 …...

编程日记 2025/7/14 22:37:10

活动预告 | Microsoft Azure 在线技术公开课：使用 Azure OpenAI 服务构建生成式应用

课程介绍通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课，掌握创造新机遇所需的技能，加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure OpenAI 服务构建生成式应用”活动，了解如何使用包括 GPT 在内的强大的…...

编程日记 2025/7/18 15:58:08

Python爬虫（二）- Requests 高级使用教程

文章目录前言一、Session 对象1. 简介2. 跨请求保持 Cookie3. 设置缺省数据4. 方法级别参数不被跨请求保持5. 会话作为上下文管理器6. 移除字典参数中的值二、请求与响应1. 请求与响应对象1.1 获取响应头信息1.2 获取发送到服务器的请求头信息三、SSL 证书验证1. 忽略 SSL 证…...

编程日记 2025/7/14 15:56:03

协议幻变者：DeviceNet转ModbusTCP网关开启机器手臂智能新纪元

技术背景DeviceNet是一种广泛应用于工业自动化领域的现场总线标准，它能够实现控制器与现场设备之间的高效通信，常用于连接各种传感器、执行器以及其他工业设备，如机器人、电机驱动器等，具有实时性强、可靠性高的特点。而ModbusTCP…...

编程日记 2025/7/16 17:30:07

自定义有序Map

package cn.ziqirj.common.utils;import lombok.Getter; import lombok.Setter;import java.util.ArrayList; import java.util.List;/*** 模拟Map集合，key不可重复，按插入顺序排序* author zhangji** param <T>*/ public class CustomOrderlyMap&…...

编程日记 2025/6/30 22:10:31

CA系统的设计(CA证书生成，吊销，数字签名生成）

CA系统概述 CA认证系统是一种基于公钥密码基础设施（PKI）的信息安全技术，它可以为网络通信双方提供身份认证、数据加密、数字签名等功能。CA认证系统的核心是证书授权机构（CA），它负责为用户（节点…...

编程日记 2025/7/13 1:16:37

流计算需要框架吗？SPL 可能是更好的选择

流数据源通常是动态、无界的，看起来与静态、有限的批数据源区别较大，传统的数据库技术在架构上难以直接处理流数据源，只能让位于后来者。heron\samza\storm\spark\flink等计算框架最先完成突破，在流计算技术中占得先发优势。这些框…...

编程日记 2025/7/13 7:20:50

Vue-Router之嵌套路由

在路由配置中，配置children import Vue from vue import VueRouter from vue-routerVue.use(VueRouter)const router new VueRouter({mode: history,base: import.meta.env.BASE_URL,routes: [{path: /,redirect: /home},{path: /home,name: home,component: () &…...

编程日记 2025/7/18 8:04:29

MySQL 读写分离

MySQL 读写分离一、配置主库(Master) 1.修改主库的配置文件修改主库的 my.cnf 配置文件，生成二进制日志 (binary log) 和服务器唯一ID，这是实现主从复制的必要配置 [mysqld] # skip-grant-tables userroot port3306 basedir/usr/local/mysql datad…...

编程日记 2025/7/16 5:18:06

记一次音频无输出的解决方案

啊啊啊，刷个抖音就发现个死电脑死都不出声，捣鼓了一天才解决打开wav文件时，提示错误找不到音频播放设备 0xc00d36fa 起初以为是声卡坏了，就到官网下载、更新了声卡驱动。无用什么驱动精灵也检测了，但也测不出啥来。…...

编程日记 2025/7/14 19:52:35

3D数学基础2

矩阵的行列式在任意方阵中都存在至少一个标量，称作该方阵的行列式。在线性代数中，行列式有很多有用的性质线性运算法则方阵 M M M的行列式记作 ∣ M ∣ |M| ∣M∣或“det M”。非方阵矩阵的行列式是未定义的。注意，在书写行列式时&…...

编程日记 2025/7/18 5:15:08

Java开发生态2024年度总结报告

1 关键要点尽管数据显示 Java 17 是最常用 JDK，但其用户占比并未超过半数。根据 New Relic 2024 Java 生态系统状态报告，Java 17、11 和 8 的用户比例分别为 35%、33% 和 29%。New Relic 数据中所谓“快速采用”指 Java 21 的采用率仅为 1.4%。虽相较 J…...

编程日记 2025/7/17 10:04:34

1月第三讲：Java子线程无法获取Attributes的解决方法

在Java多线程编程中，开发者经常会遇到子线程无法获取主线程设置的Attributes的问题。Attributes通常用于存储与当前线程相关的数据，尤其在Web应用中，它们常用于请求上下文的管理。然而，由于Java线程是独立运行的，每个线…...

编程日记 2025/7/16 18:44:43

更新金碟云星空单据供应商和币别

--应付单 select FSUPPLIERID from [dbo].[T_AP_PAYABLE] where FBILLNO=AP2024121670 select FSUPPLIERID,FCURRENCYID,* from [dbo].[T_AP_PAYABLE] where FBILLNO=AP2024121670 -- update T_AP_PAYABLE set FSUPPLIERID=100567 where FBILLNO=AP2024121670 -- update T_…...

编程日记 2025/7/15 14:59:49

3.1字体系列

3.2字体大小

3.3 font-weight字体粗细

3.4 字体样式

3.5 字体复合属性

相关文章：