CCS Font 知识整理总结

老是搞不懂 CCS 中如何正确的使用字体，这下明白了。

一、什么是 font-face

font-face 顾名思义，就是文字的脸。字体是文字的外在形式，就是文字的风格，是文字的外衣。好比行书、楷书、草书，都是一种字体。一样一个字每一个人写起来都会有差别，能够说每一个人都有一套潜在的字体库。对于web页面来讲，字体就是计算机上存储的一套文字显示方式。经过对文字进行一些特殊处理（好比末端增强）来提升不一样环境中文字的可读性。

二、什么是 font-family

关于 font-family 的介绍大多数只是说明他能够设置文本中的字体名称序列。其实 font-family 真正的做用是将一系列近似的字体按照优先级顺序组成一个列表，浏览器从第一项开始依次查找，找到第一种可用的字体来显示文字。

font-family: Times New Roman,"open-sans","幼圆",sans-serif

当浏览器显示一个字符时，会首先从 Times New Roman 中寻找这个字符，若是找到就用 Times New Roman 字体来显示这个字符。若是没找到就去 open-sans 中寻找，若是找到就用该字体显示字符，没找到就会依次寻找下去，若是在通用字体库 sans-serif 中也没有找到就会用一个缺字符代替（一般是小方框）。

<p style='font-family: Times New Roman,"open-sans","幼圆",sans-serif'>
    <span>时间就是金钱</span><span>Time is money.</span>
</p>

好比上面这段代码，对于汉字部分浏览器会先去 Times New Roman 中查找，没有找到，接着再去 open-sans 中查找，仍然没有找到，继续到“幼圆”中寻找，幼圆中能够找到对应字符则用该字体来显示。对于英文部分能够在 Times New Roman 中寻找则会用该字体来显示。

font-family 中有时候字体加引号有时候不加引号。区别在于对字体名称中空格的处理不一样。不加引号时，忽略字体左右两端的空白字符，单词之间的空白字符被解释为一个空白字符。