css进阶 03-网页设计和开发中,关于字体的常识
03-网页设计和开发中,关于字体的常识
#前言
我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰。
这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。
字体真的只是“系统默认,无从解释”这么简单吗?是产品被忽悠?还是开发在敷衍?二者之间的博弈究竟谁能胜出?学会本文,你就能胜出。
#字体分类
常见的字体可以分为两类:衬线体、无衬线体。
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
#多字体 fallback 机制
多字体 fallback 机制:当指定的字体找不到(或者某些文字不支持这个字体)时,那就接着往后找。比如:
.div1{
font-family: "PingFang SC", "Microsoft Yahei", monospace;
}
上方 CSS 代码的意思是:让指定标签元素中的文字,在 Mac & iOS 平台用苹方字体,在 Win 平台用微软雅黑字体,如果这两个字体都没有,就随便找一个等宽的字体进行渲染。
注意:
(1)写 CSS 代码时,字体族不需要带引号。
(2)有些 Mac 用户会安装 Office 等软件,安装这些软件后,系统会顺带安装微软雅黑字体。此时,写 CSS 代码时,如果写成 "Microsoft Yahei", "PingFang SC"
这种顺序,可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体,你忍心割舍吗?
#font-weight:字体的加粗属性
font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时,网页一打开,产品经理首先关注到的就是字体的加粗问题,你信不信?下面这些话都是产品经理的口头禅,想必早已让你产生了幻听:
“这个字体怎么没有加粗?”
“这个字体是不是太粗了点?”
“为什么 iPhone 和 Android 手机上的文字粗细不一致?”
想要明白这些疑惑,我们先来看看 font-weight
有哪些属性值。
font-weight 属性:在设置字体是否加粗时,属性值既可以直接填写 100 至 900 这样的数字,也可以填写normal
、bold
这样的单词。normal
的值相当于 400,bold
的值相当于 700。如下:
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: normal; // 相当于 400
font-weight: bold; // 相当于 700
关键问题来了。很多人会发现,在 Windows 平台的浏览器中, font-weight 无论是设置300、400,还是500,文字的粗细都没有任何变化,只有到600的时候才会加粗一下,感觉浏览器好像不支持这些数值,那搞这么多档位不就是多余的吗?
这个时候,大家就开始吐槽 Windows 电脑太挫、Windows 浏览器太挫;同时还会感叹 Mac 真香,支持字体的各种粗细。
实际上,所有这些数值关键字浏览器都是支持的,之所以没有看到任何粗细的变化,是因为你所使用的字体不支持。
就拿“微软雅黑”来举例,它只支持 400 和 700 这两种粗细,所以当你在代码里写成500的时候,也会被认为是400。但是 Mac 上的“苹方”字体,就支持从100到900之间的各种粗细。
再比如,前段时间,阿里巴巴开源的普惠字体,也是支持多种粗细的:
#各大平台的默认字体加粗效果
一张图,胜过千言万语。解释了这么多,我们来看看各大平台的字体加粗效果是什么样的。
以下截图,都是我亲测的结果,如果你打算让别人看效果,直接把下面的图丢给他即可。像我这样贴心的前端,不多见了。
1、Mac 平台的默认字体加粗效果:(苹方字体)
2、Windows 平台的默认字体加粗效果:(微软雅黑字体)
3、iOS 平台的默认字体加粗效果:(苹方字体)
4、Android 平台(华为 P30 Pro)的默认字体加粗效果:(Droid Sans 字体)
总结:(各大平台的默认字体加粗效果)
Mac & iOS 平台的“苹方”字体:500 和600,加粗效果是不同的;
>=600
的加粗效果是相同的。Windows 平台的“微软雅黑”字体:只有
>=600
才会加粗,而且加粗效果相同。Android 平台的 Droid Sans 字体,只有
>=700
才会加粗;而且加粗效果相同。
#大部分字体不是免费的
有一点你需要知道:你所见到的大部分字体,都不是免费的。换句话说,如果你想用第三方字体从事商业活动,要先交钱,获得授权后才可以使用。你在给公司做网页的时候,就是一种商业行为。
「微软雅黑」是免费字体吗?并不是。你可以将微软雅黑字体用在 office 软件中,但是一旦脱离了 office 软件或者脱离了 Windows 系统(比如说,你把做好的PPT打印出来拿去做商业宣传),你就不能使用该字体。
同理,苹果专属的「苹方字体」也只能在苹果系统的生态内使用。
免费字体当然有,比如思源黑体(Adobe 和 Google 在2014年7月联合推出的一款开源字体)、阿里巴巴普惠体等。但这些免费字体,我们平时基本用不到。
这也就是为什么,很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来,避免未来潜在的纠纷和麻烦。
给大家列举一个常见的场景。很多时候,前端同学拿到的视觉稿是 psd 稿,需要用 PS 软件打开源文件,才能看到里面的文字是什么字体。在 PS 软件里,当我们用光标选中字体的时候,出现了下面这种场景:
看到上面的FZLTZCHK
,不要慌,马上去 Google 查一下,发现这个字体的全称是方正兰亭
字体系列。恩,基本可以肯定, 这个字体也是要收费的。
这个时候,前端同学要马上告诉产品或者设计师,不要用这个字体,因为它是商用字体,是要收费的,小心吃官司。那我们该用什么字体呢?接着往下看。
#网页一般用什么字体
大多数情况下,网页使用系统默认的字体就足够了。如果要使用特殊字体,顶多只是让阿拉伯数字使用特殊字体。中文和英文,使用默认字体,完全足够。
如果确实要使用特殊字体,只有这几种办法:
使用开源的免费字体(比如思源黑体、阿里巴巴普惠体等)。但这类字体,种类很少,而且不是很好看。网页开发中,基本没人用。
单独购买商用字体,获得授权。
自己公司开发一套字体,给自己人用。
比如我所在的 JD 公司就自主开发了一套商用字体JDZH
(只允许 JD 公司自己用,别家公司不允许用),支持三种粗细。如下:
/**
* JD正黑体,提供三种字重,请严格按设计稿选择字体
*/
@font-face {
font-family: 'JDZH-Light';
src: url('xxx.com/data/ppms/others/JDZH_Light.ttf') format('truetype');
}
@font-face {
font-family: 'JDZH-Regular';
src: url('xxx.com/data/ppms/others/JDZH_Regular.ttf') format('truetype');
}
@font-face {
font-family: 'JDZH-Bold';
src: url('xxx.com/data/ppms/others/JDZH_Bold.ttf') format('truetype');
}
@font-face {
font-family: 'JDZhengHT-EN-Bold';
src: url('xxx.com/data/ppms/others/JDZhengHei_01_Bold.ttf') format('truetype');
}
为了使用这个JDZH
字体, JD公司在实际开发网页时,是这样做的:
步骤1:在公共的 CSS 文件中引入上方的字体库代码。这样的话,当页面加载时,用户的终端就会去下载这个字体库。
步骤2:在业务代码中,针对目标样式,直接使用
font-family: 'JDZH-Regular';
这样的代码,即可生效。
这个JDZH
,我们一般也只使用在阿拉伯数字中;中文和英文,建议使用系统默认字体就行。
#免费可商用字体有哪些
字体版权一直是很多设计师的雷区,一不小心就容易触犯。因此,这一段,我们就来弄清楚一个问题:免费可商用字体到底有哪些?
#1. 思源黑体(推荐)
思源黑体(Source Han Sans):Adobe 和 Google 在 2014 年 7 月联合推出的针对中日韩的开源字体,在字重(字体粗细程度)上分7个层级。
思源黑体是最有名的免费商用字体。字体下载:https://github.com/adobe-fonts/source-han-sans/tree/release/
上图中,点击红框部分,即可下载该字体的压缩包。
#2. 思源宋体
思源宋体:同样也是Adobe 联合 Google经过长达一年半的研发, 在 2019年 4 月 3 日发布了思源宋体( Source Han Serif,Google 称 Noto Serif CJK)。
思源宋体包含了简繁日韩四种汉字写法,拥有7种粗细字重,共设计了458745个汉字。也就是说每一种字重包括65535个字形。
#3. 站酷系列字体
截止目前有4种字体,都是免费授权全社会使用,允许商用。
#4. 方正系列
方正对外提供四款免费字体,楷体、黑体、仿宋、书宋,可以商业发布,只要不进行转换、改编、传播。
注:方正虽然有四款优秀的免费可商用的字体,但有一点麻烦的是,需要书面授权,感兴趣的同学可以在他们的官网上查看一下授权使用范围。
#5. 文泉驿系列字体
说到中文字体开源的鼻祖,学者房骞骞在 2004 年发起的公益项目应该算一个。文泉驿系列字体是开源字体,允许商业使用。
#6. 郑庆科黄油体
这是一款个人设计师郑庆科推出的黄油体。
#7. Font Space
Font Space有很全的字体,都是用户自己上传的,截至2017年3月有21款免费可商用的字体(包含2款文泉驿中文)。
#8. 濑户字体
濑户制作的免费字体,字体包含中文繁体常用字及多国语言。
#9. Arual
这是一款设计师都爱用的英文字体,简单实用。
#免费字体打包下载
链接:https://pan.baidu.com/s/1MvFpCT_0wED7ovwJe_LO5w
密码:md0d
#怎么知道哪些字体是侵权的?
可以在“360查字体”网站上检查自己电脑上哪些字体是免费可商用的,哪些是商用需要授权的。
- 360查字体:https://fonts.safe.360.cn
#最后一段
所谓「见微知著」,一个再不起眼的知识点,也是有很多学问的。光是“字体”这一点,就足够成为一门学科。
2005年,苹果公司创始人乔布斯(Steve Jobs)在斯坦福大学的毕业典礼演讲上,有过这样一段话:
当时的我从来没有期盼过我所学的这些东西,能够在我的生活中有什么实际的用处。
但是到了十年之后,当我们在设计第一台 Macintosh 电脑时,这些所学都涌进了我的头脑。于是,我把这些设计融入到了 Mac 电脑之中,这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。
可以说,如果我当时没有退学,就不会有机会去参加我感兴趣的美术字课程,Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后,似乎所有的电脑都应该是这个样子。
当时的我没有办法把这些点点滴滴连接起来,但是,当我十年后回顾的时候,一切都变得豁然开朗。
#推荐阅读
css进阶 03-网页设计和开发中,关于字体的常识的更多相关文章
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...
- 网页设计与开发:HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...
- IOS开发中UIFont字体设置
我们在开发中很多时候要设置UIlabel,UIbutton,UItextfield的字体,这个时候我们就需要用到UIFont,下面简单介绍一下UIFont的用法,仅供参考. UIFont用于获取和设置 ...
- 二次开发中cad字体的总结
目前手头一个项目,关于制图统一平台的,特别研究了CAD中的字体,总结出来,给需要的朋友,希望少走弯路.1.cad2008中,netload之后,输入注册的命令,提示未知命令解决:将引用中CAD两个dl ...
- Java(Android)编程思想笔记03:在Android开发中使用MVP模式
1. MVP模式简介: MVC模式相信大家肯定是比较熟悉的:M-Model-模型.V-View-视图.C-Controller-控制器. MVP作为MVC的演化版本,那么类似的MVP所对应的意义:M- ...
- Android(java)学习笔记100:android开发中修改字体
首先如果android内部自带的字体不是我们需要的字体,那我们就需要字体文件导入到android开发工程中,下午我们详细讲述: 1.我们首先分析知道,我想要TextView控件中文字的字体是:华文楷体 ...
- iOS开发中自定义字体的方法
http://www.cnblogs.com/iyou/archive/2014/05/25/3751669.html 1. 首先下载你想要设置的字体库,例如设置方正启体简体 2. 添加到工程,一定要 ...
- android开发中设置字体
转自:http://segmentfault.com/q/1010000000494116 http://ryanhoo.github.io/blog/2014/05/05/android-bette ...
- Html JavaScript网页制作与开发完全学习手册
Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...
随机推荐
- freshclam
1 3 * ** /usr/local/clamav/bin/freshclam 定时更新.定时杀毒
- ABBYY FineReader 15 PDF文档查看功能
PDF文档查看功能是ABBYY FineReader 15(Windows系统)OCR文字识别软件中PDF编辑器的一项基础功能,可供用户查看,搜索PDF文档,无需进入编辑模式,也可复制其中的文本,图片 ...
- FL Studio中如何使用插件混杂功能中的琶音器
琶音指一串和弦音从低到高或从高到低依次连续奏出,可视为分解和弦的一种.通常作为一种专门的技巧训练用于练习曲中,有时作为短小的连接句或经过句出现在乐曲旋律声部中.在Trance类型电子音乐中,琶音的运用 ...
- 找回消失的IDM嗅探下载浮动条的方法
我们之前讲了IDM资源嗅探的下载浮动条的设置方法,然而在有些时候,这个下载浮动条无法正常显示出来,影响了下载体验,这个问题该如何解决呢? 1.安装IDM扩展程序 一般来说,在IDM安装完成后,会在浏览 ...
- 使用Folx下载任务完成后,怎么自动完成关闭
下载工具的优点是可以通过多线程的方式,提高文件的下载速度,减少用户的下载时间.但另一方面来说,下载工具为了达到高速下载,也会占据较多的带宽资源,甚至会拖慢电脑的运行. 因此,很多用户会利用电脑的空闲时 ...
- python应用(1):安装与使用
程序员的基本工作是写程序,而写程序要用到编程语言,编程语言可以分为编译型语言跟解释型语言. 编译型语言,就是在执行代码之前,先把源代码编译(加链接)成另一种形式的代码,比如目标代码,或字节码,这种代码 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- 二分查找 leetcode704
class Solution { public int search(int[] nums, int target) { int l=0; int r=nums.le ...
- Redis 基础设计结构之四 set(集合)
Redis 有 5 种基础数据结构,分别为:string (字符串).list (列表).set (集合).hash (哈希) 和 zset (有序集合). 今天来说一下set(集合)这种存储结构,s ...
- [LGOJ1273]有线电视网
solution 用了一个很有意思的转移方法. $dp[i][j] $ 表达 \(i\) 作为根,\(j\)个终端时最大的收益,即钱数,当\(0\leq dp[1][i]\)时,即以1为根可以转移到\ ...