WEB基础之:CSS字体

本文详细介绍了CSS中的字体相关属性,包括字体系列(如Serif、Sans-serif等)、font-family的使用、font-weight的字体加粗、字体大小的em单位设置、font-style和font-variant的文本变形、font-stretch的字体拉伸以及line-height的行高调整。内容覆盖了字体的各个方面,帮助理解CSS如何控制文本样式。
摘要由CSDN通过智能技术生成

1. 字体系列

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

  • Serif 字体: 这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则称该字体是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰,比如小写 l 顶部和底部的短线,或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
  • Sans-serif 字体: 这些字体是成比例的,而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
  • Monospace 字体: Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相同,所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线,也可能没有。如果一个字体的字符宽度完全相同,则归类为 Monospace 字体,而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
  • Cursive 字体: 这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
  • Fantasy 字体: 这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

2. font-family使用字体系列

font-family 先确定多个字体的优先顺序,然后用逗号将它们连起来:

p {
   font-family: "Times New Roman", "Microsoft New Tai Lue", Georgia, Serif, Arial;}

根据上面的列表。用户代理会按所列的顺序查找这些字体,若所列所有字体都不可用,就会简单地选择一个可用的serif字体。

即:font-family 属性的值是用于某个元素的字体族名称一个优先级列表。浏览器会调用按优先顺序查找后可识别的第一个字体名称。

  • 建议在所有font-family规则中都提供一个通用字体系列,在用户代理无法提供与规则匹配的特定字体时,会选择一个候选字体。
  • font-family中使用引号:使用场景是当一个字体名中有一个或多个空格,或者字体名包含#或$之类的符号;

3. font-weight字体加粗

加粗的相对值必须要限制在绝对大小范围内。

p {
   font-weight: normal;}
p {
   font-weight
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值