CSS学习3(字体)

字体系列

这是最乱的地方,几乎所有的字体都有多种名字。同种字体的不同风格(斜体,加粗等等)也有不同的名字,为了解决这个问题,CSS使用font-family表示一个系列的字体,包括这种字体的各个风格。
设置时,你可以指定字体系列,也可以指定特定的字体。字体可以设置多个,用户代理会依次查找,直到找到第一个可用的为止。

font-family:"s","Monaco","Times",sans-serif;

如果真的找不到,那用户代理就会使用自己的默认字体了。
这里特定字体需要加引号,字体系列则不能加引号。

字体加粗

b {font-weight: bold;}

加粗的值有这些:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

实际上,这些数字本身并没有固有的加粗度。CSS规范只是指出,每个数对应一个加粗度,它至少与前一个数指定的加粗度相同。因此,100、
200、300和400可能都映射到同样的较细变形,500和600可能对应到同样的较粗字体变形,而700、800和900 可能都生成同样的很粗的字体变
形。只要一个关键字对应的变形不会比前一个关键字所对应变形更细,就都是允许的。
一般地,这些数都被定义为与某个常用变形名等价(先不考虑font-weight的其他值)。 400定义为等价于normal, 700对应于bold。其他数不
对应font-weight的任何其他值,不过它们可能对应于常用变形名。如果有一个字体变形标为Normal、Regular、Roman或Book,就会为之指定
400,而标为Medium的变形会指定为500。不过,如果一个标为Medium的变形是唯一可用的变形,它不会指定为500而会是400。

在你想让字体相比于父元素更粗或更细的时候,可以使用bolder和lighter。

字体大小

实际上,font-size属性与你看到的实际字体大小之间的具体关系由字体的设计者来确定。这种关系设置为字体本身中的一个em方框(有人也称之
为em框)。这个em方框(以及相应的字体大小)不一定指示字体中字符建立的任何边界。相反,它指示如果没有额外行间距(CSS中的line-
height)设置字体时基线间的距离。某种字体的字符可能比默认的基线间距离要高,这是完全有可能的。出于这种原因,定义字体时可能要求
所有字符都小于其em方框,很多字体就是这样做的。因此,font-size的作用是为给定字体的em框提供一个大小,而不能保证实际显示的字符就是这种大小。
有这些可能的值:font-size
xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | (length) | (percentage)
| inherit
其中smaller,larger, percentage是相对父元素而言的。

风格和变形

font-style:italic | oblique | normal | inherit
font-variant:small-caps | normal | inherit
small-caps会把小写字母变成小的大写字母。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值