• 关于font-family


    在设置页面字体的时候,你会发现在 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 是一个类似 微软雅黑 的字体了哦。

  • 相关阅读:
    [LeetCode] 638. Shopping Offers
    [LeetCode] 1436. Destination City
    [LeetCode] 405. Convert a Number to Hexadecimal
    [LeetCode] 1909. Remove One Element to Make the Array Strictly Increasing
    [LeetCode] 1475. Final Prices With a Special Discount in a Shop
    [LeetCode] 650. 2 Keys Keyboard
    [LeetCode] 1382. Balance a Binary Search Tree
    [LeetCode] 917. Reverse Only Letters
    [LeetCode] 1189. Maximum Number of Balloons
    [LeetCode] 447. Number of Boomerangs
  • 原文地址:https://www.cnblogs.com/zhangxiongcn/p/6095426.html
Copyright © 2020-2023  润新知