css零到一基础教程041:CSS 字体大小

本文详细介绍了CSS中设置字体大小的各种方法,包括像素、em、百分比和vw单位的使用,强调了响应式设计和可访问性的考虑。通过实例展示了如何调整文本大小并解释了不同单位在不同场景下的应用。
摘要由CSDN通过智能技术生成

字体大小

font-size 属性设置文本的大小。

在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。

请始终使用正确的 HTML 标签,例如 <h1> - <h6> 用于标题,而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸:

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小(可访问性不佳)
  • 当输出的物理尺寸已知时,绝对尺寸很有用

相对尺寸:

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

注释:如果您没有指定字体大小,则普通文本(如段落)的默认大小为 16px(16px = 1em)。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小:

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值