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会把小写字母变成小的大写字母。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容