首页 技术 正文
技术 2022年11月7日
0 收藏 726 点赞 329 浏览 967 个字

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,945
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,471
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,284
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,100
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,731
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,767