关于网页字体扯出来的一些事

http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html

http://www.zhihu.com/question/22413725

http://ued.ctrip.com/blog/?p=3589

参考文章如上。

css中font-family的解析规则

font-family 规定元素的字体系列;font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个,如果都没有,就会使用用户代理(浏览器)设置的默认字体。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

若字体没有是否下载

使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。

属性值

在 CSS 中,有两种不同类型的字体系列名称:

通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")

特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体),这些通用的名称允许用户代理从相应集合中选择一款字体。

serif字体在字符笔画末端有叫做衬线的小细节,这些细节在大写字母中特别明显

sans-serif字体在字符笔画末端没有任何细节,与serif字体相比,他们的外形更简单。

monospace 字体,每个字母的宽度相等,通常用于计算机相关书籍中排版代码块。

fantasy 和 cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。

网页常用字体

Sans-serif系列: 

Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。

 Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常 

Lucida Family: Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。 

Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。

 Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。

 Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。   

Serif系列:

 Georgia: 基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。

 Times: Times是为了报纸而设计的,特点是可以在有限的空间塞进去更多的文字,笔画较弱,小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文,被骂得很惨之后换成了Georgia。  

中文系列:

 宋体:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。 

微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。

 华文细黑:Mac下的默认中文。

注:移动浏览器支持的字体较少

微软雅黑是不是非衬线字体?在 CSS 中受 sans-serif 控制吗?(节选自知乎)

http://www.zhihu.com/question/22413725

从字体分类的角度来说,一般西文字体有 serif(衬线)字体和 sans-serif(无衬线)字体的风格之分;中文字体有宋体、黑体、楷体、仿宋等风格之分。严谨的人一般不会认为中文的宋体是衬线字体,黑体是无衬线字体。

不过,在实际应用中,因为中文的宋体和西文的衬线体,中文的黑体和西文的无衬线体,在风格和应用场景上相似,所以通常搭配使用。

以上是字体分类的讨论,跟电脑无关。下面回答电脑上的问题。

CSS 中「sans-serif」这样的语句,是在告诉浏览器如果前面指定的字体在客户端上没有的时候,应该做什么选择。现代浏览器,往往有自己的默认字体设置。比如你在 Chrome 的设置(

chrome://settings/fonts

)里有四个字体设置。比如在这里我把「sans-serif 字体」设置成「Helvetica」,那么当 Chrome 遇到一段「font-family: sans-serif」的文字,就会用 Helvetica 显示。可是,Helvetica 中没有中文,那么中文怎么办呢?这时,一般的浏览器就要看系统的字体 fallback 配置了。有的浏览器如 Chrome 等可能会根据网页的 lang 属性自主选择最终的字体,而无视操作系统的配置。

简体中文的 Windows 在这种情况下都会 fallback 到系统级的默认字体中易宋体,而不会像我们「希望」的那样 fallback 到微软雅黑。因为 Windows 在系统层面没有指定用微软雅黑作为与 sans-serif 搭配的中文字体。Windows 下这个配置是由注册表中的 font link 控制的。

再比如,Android 的系统字体配置也是由两个文件控制,首先指定了系统级的 sans-serif 字体是 Roboto,serif 字体是 Droid Serif,然后对于这俩字体不支持的其他文字(中文、朝鲜文、日文、阿拉伯文等)就要按一个 fallback 顺序区匹配响应的字体。但是这个 fallback 顺序列表并不分 sans-serif 和 serif,也就是说,不管你的 CSS 怎么写,在 Android 上你只能看到一种中文字体。

有的操作系统,比如 OS X,则比较高级,会给 sans-serif 和 serif 等不同风格分别存储字体 fallback 配置。比如 sans-serif 最后 fallback 到华文黑体,serif 最后 fallback 到华文宋体。

* * *

最后,简要回答你的问题:

微软雅黑是一种中文黑体,适合与西文无衬线体搭配,但是严谨的字体分类者不认为它是无衬线体。浏览器如何处理「sans-serif」取决于浏览器的设置,一般都是先匹配浏览器设置中的默认 sans-serif 字体(浏览器没有单独配置的跳过),再按照操作系统的字体 fallback 顺序来(有的浏览器会自作主张)。而简体中文 Windows 系统级的默认字体是中易宋体,也就是说如果没有在任何一个环节点名指定某个中文字体,最后都会用中易宋体来显示。

* * *


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

推荐阅读更多精彩内容

  • 大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽...
    陈_宣阅读 1,906评论 0 7
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,072评论 0 12
  • 常见字体的中英文对应 Font-family:SimSun,"宋体" Font-family:"Microsoft...
    冰果2016阅读 2,620评论 0 2
  • 导读 世界是我的,也是你的,但每个人的世界终究是自己一个人的世界。我们遇到的那些人,那些事,不过是自己人生旅途中的...
    媚影心语阅读 380评论 2 2
  • 车轮撵过马路上的积水, 路口旁的垃圾堆有苍蝇在跳舞。 我打开车门, 银杏树的叶子上沾满了灰尘, 无人打理的五月梅落...
    柿子无情阅读 316评论 2 1