>

你可能不知道的font,关于网页字体扯出来的一些

- 编辑:至尊游戏网站 -

你可能不知道的font,关于网页字体扯出来的一些

你可能不知道的font

2016/03/21 · CSS · 1 评论 · 字体

本文作者: 伯乐在线 - SuperSnail 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

Serif字体

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

Sans-serif字体

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

图片 1 一张图区分衬线字体和无衬线字体

Monospace字体

  • Monospace字体是不成比例的。它通常用于模拟打字机打出的文本。老式的点阵机的输出,甚至是更老式的视频显示终端。采用这些字体,每个字符宽度相等,所以小写的i和小写的m有一样的宽度。他们可能有衬线也可能没有衬线。
  • 判别这种字体的唯一标准就是等宽。
  • Monospace字体的例子包括Courier,Courier New,Andale Mono

图片 2 Monospace字体

Cursive字体

  • 这些字体试图模仿人的手写体。通常有曲线和sedf字体中没有的笔划装饰组成。比如,Comic Sans,Author等

图片 3 Cursive字体

Fantasy字体

  • 这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其归到任何一种其他字体。比如,Western,Woodblock,Klingon

图片 4 Fantasy字体

理论上来说,用户安装的任何字体都应该属于以上某个系列,但是也有可能有例外,不过这种例外并不多。 在这里不得不提的是浏览器的默认字体 浏览器都会有默认的一个字体系列,在代码没有设置字体类型的时候,就会以默认的字体系列展示。众所周知,在中文版window下,IE,Chrome,Firefox的默认中文字体都是中易宋体。因此当字体系列名称为serif,sans-serif,monospace均使用中易宋体字体库。 MAC OS X下浏览器的默认中文字体是华文黑体。 要注意的是,在设置font-family的时候要以字体系列名称(generic-family)比如,serif,这样的结尾,因为在generic-family后面设置的字体名称是不会生效的。 比如:

JavaScript

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

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

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

关于字体的属性

指定字体类型

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

    body{font-family:sans-serif;}

    1
    body{font-family:sans-serif;}

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

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

JavaScript

  body{font-family:microsoft yahei;}

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9cbc26d858145752-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9cbc26d858145752-1" class="crayon-line">
  body{font-family:microsoft yahei;}
</div>
</div></td>
</tr>
</tbody>
</table>

这样就会将微软雅黑应用于body元素,如果用户代理找不到微软雅黑这个字体,它只能使用用户代理默认的字体来显示,除此之外,什么都不做。 当然,我们也可以结合使用字体系列和字体名

CSS

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

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

这样在找不到微软雅黑字体的情况下,则会使用另一种无衬线字体。 处于这样的考虑,就很建议在写font-family的时候提供一个通用字体系列,这样,就提供了一个在找不到预设字体时候的备选方案。书写的方法是,确定这些字体的优先顺序,然后用逗号分隔。 比如:

CSS

    body{font-family:Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}

1
    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匹配

如果经过以上两步没有匹配到字体,那么就会去寻找候选字体。 如果没有候选字体,用户代理将会为给定的通用字体选择一个默认字体。 font-face规则 关于font-face的介绍:Iconfont玩法

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

图片 5

1 赞 4 收藏 1 评论

参考文章如上。

关于作者:SuperSnail

图片 6

切图仔,射手座,脑容量小,伪文艺女青年 个人主页 · 我的文章 ·  

图片 7

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 控制吗?(节选自知乎)

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

* * *

本文由软件综合发布,转载请注明来源:你可能不知道的font,关于网页字体扯出来的一些