在设置页面字体的时候,你会发现在 font-family 属性中会设置好多个字体,想看懂它们都是什么字体吗?不好意思,我不是搞设计的,我也不知道。那么,现在写的东西,只是对于一个前端人员来说,要了解的 font-family 属性而已。以下的内容,仅仅是本人的一点粗浅理解,希望对于新手有点概念上的帮助。

字体家族

首先,大家有没有这么个疑问?为什么我们选择字体的时候要用 font-family 而不是其他的名词呢?

其实这个单词也就说明了原因所在了。那就是,字体是以家族分类的。

字体总共分为五大类,如下:

  • serif :矢量字体,线条有粗细,可等比例缩放。
  • sans-serif :这应该是我们用的最多的字体家族了,它和 serif 的区别就是,H 和 I 上下没有小横线。
  • monospace :等宽字体。
  • cursive :手写字体。
  • fantasy :其他各种无法归类的字体,比较个性的字体了都属于这一类了。

字体选择

在设置 font-family 时,字体的选择是有先后顺序和优先级的。

一般的话,在写一个项目的时候,都会备用好几个字体。选择用什么字体,它在视觉上呈现的效果如何,这里我们不去细说,因为我也不懂啊,O(∩_∩)O哈哈~(总有种要被打的错觉)。

进入正题,一般设计给出我们几种字体后,对于前端的工作,其实很简单了,就是排序。。。页面设计用的主要字体放在第一位,之后的第二或第三位写上备用字体。因为不是所有用户的电脑上都会有我们的首选字体;

其中英文字体写前边,中文字体写后边,不用担心页面中出现了中文字体后会使用前边的英文字体,它会乖乖地用我们要求的中文字体的,嗯(因为中文无法用英文字体识别显示出来的呀)。

最后的最后,就是我们强大的字体家族了,在最后一定请加上 sans-serif (或别的那几种家族中的一种),这是最后一个保险,我们设置的所有字体在用户的电脑上都没有的时候,就让它们用用户电脑上的默认 sans-serif 字体显示出来,不至于出来乱七八糟的样子啊。

结束语

以上简单的东西,除了对于 font-family 的一个简单介绍外,还有一点想表达的是 我们要对自己的产品有足够的把控,尽量不要让它超出我们的控制范围之内。备用方案永远是需要的。

大致了解五大家族后,我们在字体的选择时,应该会更好的认识了,所以请不要在认为 sans-serif 是一个类似 微软雅黑 的字体了哦。

04-28 07:14