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

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 系统级的默认字体是中易宋体,也就是说如果没有在任何一个环节点名指定某个中文字体,最后都会用中易宋体来显示。

* * *


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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