专栏首页前端劝退师WecTeam:撸了这么多代码,你真的了解字体吗?

WecTeam:撸了这么多代码,你真的了解字体吗?

转载自:[WecTeam:浏览器合成与渲染层优化] (https://mp.weixin.qq.com/s/knmQ1XRwt4sUdwTjORoF4A)

前言

我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰。

这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。

字体真的只是“系统默认,无从解释”这么简单吗?是产品被忽悠?还是开发在敷衍?二者之间的博弈究竟谁能胜出?学会本文,你就能胜出。

字体分类

常见的字体可以分为两类:衬线体、无衬线体

1、serif(衬线体):在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。

常见的衬线体有:

•宋体、楷体•Times New Roman

2、sans-serif(无衬线体):笔划粗细基本一致,只剩下主干,造型简明有力,起源也很晚。适用于标题、广告等,识别性高。

常见的无衬线体有:

•黑体•Windows 平台默认的中文字体:微软雅黑(Microsoft Yahei)•Windows 平台默认的英文字体:Arial•Mac & iOS 平台默认的中文字体:苹方(PingFang SC)•Mac & iOS 平台默认的英文字体:San Francisco•Android 平台默认字体:Droid Sans

补充

衬线体如今已经很少使用了,你所熟悉的“宋体”,也基本只能在纸质出版物中见到。而非衬线体更符合现代审美

所以,在这里温馨提示各位:做PPT不要用宋体。如果你不知道用什么字体,那就用系统的默认字体就好:Win 平台用微软雅黑、Mac 平台用苹方字体。

如果你发现一名设计师,在做海报设计、或者制图的时候,使用了宋体,说明她一定是个外行。

字体族

CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类:

•serif:衬线体。•sans-serif:无衬线体。•monospace:等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。•cursive:手写字体。比如徐静蕾手写体。•fantasy:梦幻字体。比如一些艺术字。

这五类字体族不代表某一个具体的字体,而是当你在 CSS 中指定字体族的时候,系统就有可能在字体族中找出一种字体来显示。

参考链接:serif,sans-serif,monospace,cursive和fantasy[1]

多字体 fallback

多字体 fallback 机制,可以理解成是字体的一种兜底机制。它意思是:当指定的字体找不到时,就继续往后找。比如:

.div{    font-family: "PingFang SC", "Microsoft Yahei", sans-serif;}

上面这行CSS代码的意思是:让文字在 iOS & Mac 操作系统上使用苹果的“苹方”字体,在 Windows 系统上用微软雅黑字体,如果这两个字体都没有,就随便找一个无衬线体进行显示。

font-weight:字体的加粗属性

font-weight 字体加粗属性,是让前端和产品同学最迷茫的属性。当你把做好的页面拿给产品经理体验时,产品经理首先关注到的就是字体的加粗问题。

我们先来看看 font-weight 有哪些属性值。

在设置字体是否加粗时,属性值既可以直接填写 100 至 900 这样的数字,也可以填写normalbold这样的单词。normal的值相当于 400,bold的值相当于 700。如下:

关键问题是,很多人会发现,在 Android 平台的浏览器中, font-weight 无论是设置300、400,还是500,文字的粗细都没有任何变化,只有到700的时候才会加粗一下,感觉浏览器好像不支持这些数值,那搞这么多档位有用吗?

实际上,所有这些数值关键字浏览器都是支持的,之所以没有看到任何粗细的变化,要看你所使用的字体是否支持

就拿“微软雅黑”这个字体来举例,它只支持两种粗细,所以当你在代码里写成500的时候,也会被认为是400。但是 Mac 上的“苹方”字体,就支持至少六种粗细。

各大平台的字体加粗效果

一张图,胜过千言万语。解释了这么多,我们来看看各大操作系统的默认字体,加粗效果是什么样的。

以下截图,都是我亲自测试的结果,如果你打算让别人看字体加粗效果,直接把下面的图丢给他即可。像我这样贴心的前端,恐怕不多见了。

1、iOS 平台的默认字体加粗效果:(苹方字体)

2、Android 平台(华为 P30 Pro)的默认字体加粗效果:(Droid Sans 字体)

3、Mac 平台的默认字体加粗效果:(苹方字体)

4、Windows 平台的默认字体加粗效果:(微软雅黑字体)

总结:(各大操作系统的默认字体加粗效果)

•Android 平台的 Droid Sans 字体,只有 >=700才会加粗;而且加粗效果相同。•Mac & iOS 平台的“苹方”字体:500 和600,加粗效果是不同的;>=600的加粗效果是相同的。•Windows 平台的“微软雅黑”字体:只有 >=600 才会加粗,而且加粗效果相同。

本文分享自微信公众号 - 前端劝退师(quantuishi)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ESLint 在中大型团队的应用实践

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到,并或多或少会思考过这一问题。随着前端应用的大型化和复杂化,越来越多的前端工程师和团队开...

    前端劝退师
  • JavaScript 工具函数大全(新)

    原本只想筛选下上面的那篇文章,在精简掉了部分多余且无用的代码片段后,感觉不够。于是顺藤摸瓜,找到了原地址:30 seconds of code

    前端劝退师
  • 如何武装你的Vue项目?

    我想混迹前端市场的大家都知道,Vue可以说是一匹黑马,目前github star数已居第一位!前端开发者对Vue使用频率也越来越高。

    前端劝退师
  • 推荐一种适合程序员的字体(附下载地址及各平台安装方法)

    Adobe Source Code Pro 主页: http://adobe-fonts.github.io/source-code-pro/

    tonglei0429
  • 研发:k8s pod 服务生成海报时字体出现乱码

    RUN apk --update add fontconfig ttf-dejavu

    heidsoft
  • 干货 | 字体组合十法则

    设计或者艺术的世界,是没有什么一成不变的法则的。了解了基本的规则之后,我们就可以加入自己的想法,自由的去打破规则。今天就来看看现任设计师正在实践的10个字体组合...

    宇相
  • AI 字体世界地图:用 AI 和机器学习辨析各种字体的审美特征

    【新智元导读】著名设计机构 IDEO 项目负责人 Kevin Ho 受到李飞飞高徒 Andrej Karpathy 做的“图像地图”的启发,用机器学习算法通过...

    新智元
  • 字体也有性格

    今天是2016年的第一天,很特殊的也很特别的日子,祝大家新年快乐,小魔方会一如既往的每天陪大家一起分享,一起成长。 上一期给大家简单介绍了字体的基础知识,今天就...

    数据小磨坊
  • 打造前端 Deepin Linux 工作环境——系统更新以及配置字体

    打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

    FungLeo
  • 撸了这么多代码,你真的了解字体吗?

    这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。

    WecTeam

扫码关注云+社区

领取腾讯云代金券