你可能不知道的font

对于字体的认识一直有一个误区:
我们可能一直认为font-family是某一种字体,实际上,它指的是一个字体的系列。
比如说Times,它实际上是多种变形的一个组合。包括,TimesRegular,TimesBold,TimesItalic,TimesOblique,TimesBoldItalic,TimesBoldOblique等。

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

  • Serif字体
    Serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。css权威指南上的解释是说,字体成比例,上下有短线。
    如果字体中的所有字符根据其不同大小有不同的宽度,则称该字体是成比例的。
    Serif的字体容易辨认,因此易读性高。对于中文字体而言,最适合作为正文的有衬线字体是宋体。对于英文而言,常用的是Times New Roman

  • Sans-serif字体
    Sans-serif是无衬线字体。与衬线字体相反,这种字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。无衬线字体会比较醒目,但是在行文阅读的情况下并不是很容易辨认。
    中文里,黑体,幼圆,雅黑就属于无衬线字体。
    英文里,Arial,Tahoma就是常用的无衬线字体。

一张图区分衬线字体和无衬线字体
  • Monospace字体
    Monospace字体是不成比例的。它通常用于模拟打字机打出的文本。老式的点阵机的输出,甚至是更老式的视频显示终端。采用这些字体,每个字符宽度相等,所以小写的i和小写的m有一样的宽度。他们可能有衬线也可能没有衬线。
    判别这种字体的唯一标准就是等宽。
    Monospace字体的例子包括Courier,Courier New,Andale Mono
Monospace字体
  • Cursive字体
    这些字体试图模仿人的手写体。通常有曲线和sedf字体中没有的笔划装饰组成。比如,Comic Sans,Author等
Cursive字体
  • Fantasy字体
    这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其归到任何一种其他字体。比如,Western,Woodblock,Klingon
Fantasy字体

理论上来说,用户安装的任何字体都应该属于以上某个系列,但是也有可能有例外,不过这种例外并不多。

** 在这里不得不提的是浏览器的默认字体**
浏览器都会有默认的一个字体系列,在代码没有设置字体类型的时候,就会以默认的字体系列展示。众所周知,在中文版window下,IE,Chrome,Firefox的默认中文字体都是中易宋体。因此当字体系列名称为serif,sans-serif,monospace均使用中易宋体字体库。

MAC OS X下浏览器的默认中文字体是华文黑体。

要注意的是,在设置font-family的时候要以字体系列名称(generic-family)比如,serif,这样的结尾,因为在generic-family后面设置的字体名称是不会生效的。

比如:

font-family:arial,sans-serif,Simsun;
font-family:Simsun,sans-serif;

以上两个font-family来看,如果浏览器的默认字体是微软雅黑。第一个会以微软雅黑来展示,第二个会以宋体来展示。
原因就是因为第一个设置在sans-serif后面的宋体是失效的。

关于字体的属性

  • 指定字体类型
    如果你希望文档使用一种无衬线字体,但是你并不关心,到底是用了哪一种字体
    那么你的代码可以这样写

      body{font-family:sans-serif;}
    

这样的话,用户代理会自己选择一个无衬线字体,并将其运用到body元素上。

  • 指定字体名
    如果你有指定的字体,那么可以直接指定字体。

      body{font-family:microsoft yahei;}
    

这样就会将微软雅黑应用于body元素,如果用户代理找不到微软雅黑这个字体,它只能使用用户代理默认的字体来显示,除此之外,什么都不做。

当然,我们也可以结合使用字体系列和字体名

    body{font-family:microsoft yahei,sans-serif;}

这样在找不到微软雅黑字体的情况下,则会使用另一种无衬线字体。

处于这样的考虑,就很建议在写font-family的时候提供一个通用字体系列,这样,就提供了一个在找不到预设字体时候的备选方案。书写的方法是,确定这些字体的优先顺序,然后用逗号分隔。
比如:

    body{font-family:Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}
  • 引号的使用
    上面的例子中,你可能已经注意到了单引号。
    当一个字体名中有一个或者多个空格的时候或者字体名包含符号的时候,使用引号。
    在css2.1中有规范说,包含符号的字体名并不一定要使用引号,但这是一个推荐的做法,类似于“最佳实践”。

  • 加粗
    大家都知道字体的加粗用的是font-weight
    fongt-weight可以取值100-900,这些关键字映射的是字体设计时为字体指定的9级粗度。
    要注意的是,如果在字体设计的时候有指定粗度等级,那么在样式表里写font-weight的值能产生粗细效果。但是如果,字体设计的时候没有指定粗度等级,那么100,200,300,400都将映射到同样的较细变形。700,800,900都将映射到同样的较粗变形。这样问题在实际运用中经常会遇到。
    400对应于normal,700对应于bold。其他数值不对应于任何变形名。

  • 字体大小
    百分数值和em的作用一样100%相当于1em,都是相对于父元素的大小来计算。
    字体大小在继承的时候只继承具体计算值而不是百分数。
    用百分比来控制字体的缺陷是,因为用户代理在计算出字体大小之后会进行取整操作或者保留一些小数的操作,在百分比计算过多的情况下,字体缩放可能不可控。

  • 风格和变形
    ---风格font-style---
    italic(斜体)文本和Oblique(倾斜)文本的区别
    斜体是一种单独的字体风格,对每个字母的结构有了一些小改动。倾斜是基于竖直文本的一个倾斜版本,并没有改动字体结构。
    在没有italic字体但是有Oblique字体的情况下,会采用后者。但是如果有italic字体但是没有Oblique字体的情况下,用户代理只会用竖直文本计算出一个倾斜版本来生成Oblique字体。
    ---变形font-variant---
    small-caps要求使用小型大写字母文本。
    这个与text-transform:uppercase类似。之所以要用一个字体属性来声明small-caps,原因是有些字体在设计的时候有特定的small-caps字体。如果不存在这种字体,用户代理会自己缩放大写字母来创建一个small-caps字体。

  • 拉伸和调整字体
    font-stretch,允许将字体拉伸
    font-size-adjust,允许在首选在字体不可用时,对替换字体进行缩放。
    这两个属性已经在css2.1被去除,因为这两个属性,虽然在规范中存在多年,但是没有一个浏览器实现了它们。

  • 字体匹配
    css允许匹配字体系列,加粗,变形,所有这些都是通过字体匹配完成的。
    用户代理匹配字体的步骤大致如下:
    1、用户代理构建字体属性数据库,一般的这将是用户机器上安装的所有字体,以及用户代理的内置字体等。如果用户代理遇到两种相等的字体,忽略其中一个。
    2、用户代理取得应用了字体属性的元素,构建字体属性列表,基于这个列表,用户代理先进行第一次筛选,如果完全匹配,则使用这个字体。匹配顺序:根据font-style匹配,匹配italic和Oblique字体;根据font-variant匹配,匹配small-caps字体;根据font-weight匹配;根据font-size匹配

如果经过以上两步没有匹配到字体,那么就会去寻找候选字体。

如果没有候选字体,用户代理将会为给定的通用字体选择一个默认字体。

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

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 915评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,927评论 1 4
  • http://www.cnblogs.com/duanhuajian/archive/2013/01/31/288...
    ssRice阅读 2,179评论 0 6
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 5,948评论 0 12
  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 2,731评论 1 9