CSS 字体

84 篇文章 0 订阅

CSS 字体

我们可以在CSS中设置不同的字体,包括文字样式,大小,加粗等。

sans-serif和serif字体

在这里插入图片描述
**注意: ** sans-serif字体在浏览器中被认为更容易阅读

那么什么是CSS字型呢?

有两种字体类型提供给我们设置,例如:

  • 特定字体系列 - 特定的字体系列(如 “Times” 或 “Courier”)
  • 通用字体系列 - 拥有相似外观的字体系统组合(如 “Serif” 或 “Monospace”)

在这里插入图片描述

那么什么是字体系列?

我们可以使用font-family来设置字体属性。
如果浏览器不支持font-family的第一个字体,它会继续向下尝试可识别的字体。
注意: 我们可以使用逗号, 分隔来定义多个字体
举例说明:

h1{font-family:"Times New Roman", Times, serif;}

那么什么是字体样式呢?

常用的字体样式属性有这几种:

  • 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
  • 斜体 - 以斜体字显示的文字
  • 正常 - 正常显示文本

举例说明:

h1.oblique {font-style:oblique;}
h2.italic {font-style:italic;}
h3.normal {font-style:normal;}

那么怎样设置字体的大小呢?

我们可以使用font-size来设置字体的大小。

绝对大小:
  • 确定了输出的物理尺寸时绝对大小很有用
  • 不允许用户在所有浏览器中改变文本大小
  • 设置一个指定大小的文本
相对大小:
  • 允许用户在浏览器中改变文字大小
  • 相对于周围的元素来设置大小

那么怎样设置字体像素呢?

我们可以使用font-size来设置字体的大小和像素。
举例说明:

p2 {font-size:6px;}
p3 {font-size:7px;}
p4 {font-size:8px;}

那么怎样用em来表示字体大小呢?

我们通常用em单位来代替像素,避免Internet Explorer无法调整文本的问题。
在浏览器中默认字体的大小是16排序,1em和当前的字体大小是相等的,所以,1em=16px。因此也就得出了换算公式: em=px/16

举例说明:

p1 {font-size:0.875em;} /* 14px/16=0.875em */
p3 {font-size:1.875em;} /* 30px/16=1.875em */
p4 {font-size:2.5em;} /* 40px/16=2.5em */

使用百分比和EM组合

我们通常默认设置元素的字体大小为百分比的:
在所有浏览器的解决方案中,设置 元素的默认字体大小的是百分比:

距离说明:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

三季人 G

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值