3.3 字体大小font-size

本文介绍了CSS中font-size属性的使用方法及其属性值设定,包括关键字单位及像素单位(px)的具体应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、font-size属性

在CSS中,使用font-size属性来定义字体大小。

语法:
font-size:关键字/像素值;

说明:
font-size的属性值可以有两种方式,一种是使用关键字,如表1;二是使用像素做单位的数值。

二、font-size属性值
1、采用关键字为单位

font-size属性值 说明
xx-small 最小
x-small 较小
small 小
medium 默认值,正常
large 大
x-large 较大
xx-large 最大

2、采用px为单位

在中国的大部分主流网站如新浪、网易等中,大部分都是采用px为单位。
(1)什么叫px?
px,全称“pixel”(像素)。px就是一张图片中最小的点,或者是计算机屏幕最小的点。
原来一张图片是由很多的小方点组成的,每一个小方点其实就是我们常常所说的一个像素(px)。一台计算机的分辨率是800px×600px指的就是“计算机宽是800个小方点,高是600个小方点”。
px是一个相对单位,它是相对显示器屏幕分辨率而言的。

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> <!-- 背景和边框 --> <rect width="800" height="600" fill="#f9f9f9" stroke="#333" stroke-width="1"/> <!-- 标题 --> <text x="400" y="30" font-family="Arial" font-size="20" text-anchor="middle" font-weight="bold">导热性测试装置电路原理图</text> <!-- 电源模块 --> <g transform="translate(100, 100)"> <rect width="150" height="120" fill="#e6f7ff" stroke="#1890ff" stroke-width="1.5" rx="5" ry="5"/> <text x="75" y="30" font-family="Arial" font-size="16" text-anchor="middle" font-weight="bold">电源模块</text> <!-- USB接口 --> <rect x="20" y="60" width="20" height="30" fill="#ddd" stroke="#666"/> <text x="10" y="75" font-family="Arial" font-size="12" text-anchor="end">USB</text> <!-- 稳压器 --> <rect x="60" y="50" width="40" height="40" fill="#fff" stroke="#666"/> <text x="80" y="70" font-family="Arial" font-size="12" text-anchor="middle">AMS1117-5.0</text> <!-- 滤波电容 --> <circle cx="120" cy="65" r="5" fill="#fff" stroke="#666"/> <text x="120" y="75" font-family="Arial" font-size="10" text-anchor="middle">100μF</text> <!-- 输出 --> <line x1="140" y1="65" x2="150" y2="65" stroke="#666" stroke-width="1.5"/> <text x="155" y="70" font-family="Arial" font-size="12">5V</text> </g> <!-- 主控模块 --> <g transform="translate(325, 100)"> <rect width="150" height="180" fill="#fff0f0" stroke="#f5222d" stroke-width="1.5" rx="5" ry="5"/> <text x="75" y="30" font-family="Arial" font-size="16" text-anchor="middle" font-weight="bold">主控模块</text> <!-- MCU --> <rect x="35" y="60" width="80" height="80" fill="#fff" stroke="#666"/> <text x="75" y="100" font-family="Arial" font-size="12" text-anchor="middle">STM32F103C8T6</text> <!-- 晶振 --> <rect x="15" y="110" width="20" height="15" fill="#fff" stroke="#666"/> <text x="25" y="120" font-family="Arial" font-size="8" text-anchor="middle">8MHz</text> <!-- 电源连接 --> <line x1="75" y1="50" x2="75" y2="60" stroke="#666" stroke-width="1.5"/> <text x="80" y="55" font-family="Arial" font-size="10">5V</text> </g> <!-- 温度传感器模块 --> <g transform="translate(100, 280)"> <rect width="150" height="150" fill="#fff7e6" stroke="#fa8c16" stroke-width="1.5" rx="5" ry="5"/> <text x="75" y="30" font-family="Arial" font-size="16" text-anchor="middle" font-weight="bold">温度传感器模块</text> <!-- 传感器1 --> <rect x="35" y="60" width="80" height="20" fill="#fff" stroke="#666"/> <text x="75" y="75" font-family="Arial" font-size="10" text-anchor="middle">DS18B20 #1</text> <!-- 传感器2 --> <rect x="35" y="100" width="80" height="20" fill="#fff" stroke="#666"/> <text x="75" y="115" font-family="Arial" font-size="10" text-anchor="middle">DS18B20 #2</text> <!-- 上拉电阻 --> <rect x="120" y="70" width="20" height="10" fill="#fff" stroke="#666"/> <text x="135" y="75" font-family="Arial" font-size="8" text-anchor="end">4.7kΩ</text> <!-- 连接到MCU --> <line x1="150" y1="80" x2="170" y2="80" stroke="#666" stroke-width="1.5"/> <text x="175" y="85" font-family="Arial" font-size="10">DQ</text> </g> <!-- 显示模块 --> <g transform="translate(550, 100)"> <rect width="150" height="180" fill="#f6ffed" stroke="#52c41a" stroke-width="1.5" rx="5" ry="5"/> <text x="75" y="30" font-family="Arial" font-size="16" text-anchor="middle" font-weight="bold">显示模块</text> <!-- LCD --> <rect x="35" y="60" width="80" height="80" fill="#e6f7ff" stroke="#666"/> <text x="75" y="100" font-family="Arial" font-size="12" text-anchor="middle">2.4" TFT LCD</text> <!-- 连接到MCU --> <line x1="15" y1="100" x2="0" y2="100" stroke="#666" stroke-width="1.5"/> <text x="-5" y="105" font-family="Arial" font-size="10">SPI</text> </g> <!-- 按键模块 --> <g transform="translate(325, 320)"> <rect width="150" height="100" fill="#f0f0ff" stroke="#1890ff" stroke-width="1.5" rx="5" ry="5"/> <text x="75" y="30" font-family="Arial" font-size="16" text-anchor="middle" font-weight="bold">按键模块</text> <!-- 按键1 --> <rect x="35" y="60" width="20" height="20" fill="#fff" stroke="#666"/> <text x="25" y="75" font-family="Arial" font-size="10" text-anchor="end">电源</text> <!-- 按键2 --> <rect x="75" y="60" width="20" height="20" fill="#fff" stroke="#666"/> <text x="65" y="75" font-family="Arial" font-size="10" text-anchor="end">功能</text> <!-- 按键3 --> <rect x="115" y="60" width="20" height="20" fill="#fff" stroke="#666"/> <text x="105" y="75" font-family="Arial" font-size="10" text-anchor="end">确认</text> <!-- 连接到MCU --> <line x1="75" y1="40" x2="75" y2="50" stroke="#666" stroke-width="1.5"/> <text x="80" y="45" font-family="Arial" font-size="10">GPIO</text> </g> <!-- 连接线 --> <line x1="250" y1="160" x2="325" y2="160" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/> <line x1="170" y1="80" x2="300" y2="80" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/> <line x1="300" y1="80" x2="300" y2="280" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/> <line x1="550" y1="160" x2="475" y2="160" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/> <!-- 说明文本 --> <text x="400" y="550" font-family="Arial" font-size="12" text-anchor="middle">说明:虚线表示信号连接,实线表示电源连接</text> </svg> 给出电路原理图设计
06-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值