网页设计和开发中，关于字体的常识

时间 2019-11-05

标签网页设计开发关于字体常识繁體版

原文原文链接

本文的最新内容将在GitHub上实时更新。欢迎在GitHub上关注我，一块儿入门和进阶前端。css

前言

我周围的码农当中，有不少是技术大神，却经常被字体这种简单的东西所困扰。前端

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

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

字体分类

常见的字体能够分为两类：衬线体、无衬线体。segmentfault

一、serif（衬线体）：在字的笔画开始、结束的地方有额外的装饰，并且笔画的粗细会有所不一样。浏览器

常见的衬线体有：字体

宋体、楷体url
Times New Romanspa

二、sans-serif（无衬线体）：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。.net

常见的无衬线体有：

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

参考连接：如何优雅的选择字体(font-family)

补充：

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

因此，在这里舒适提示各位：作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之间的各类粗细。

再好比，前段时间，阿里巴巴开源的普惠字体，也是支持多种粗细的：

各大平台的默认字体加粗效果

一张图，赛过千言万语。解释了这么多，咱们来看看各大平台的字体加粗效果是什么样的。

如下截图，都是我亲测的结果，若是你打算让别人看效果，直接把下面的图丢给他便可。像我这样贴心的前端，很少见了。

一、Mac 平台的默认字体加粗效果：（苹方字体）

二、Windows 平台的默认字体加粗效果：（微软雅黑字体）

三、iOS 平台的默认字体加粗效果：（苹方字体）

四、Android 平台（华为 P30 Pro）的默认字体加粗效果：（Droid Sans 字体）

总结：（各大平台的默认字体加粗效果）

Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不一样的；>=600的加粗效果是相同的。
Windows 平台的“微软雅黑”字体：只有 >=600 才会加粗，并且加粗效果相同。
Android 平台的 Droid Sans 字体，只有 >=700才会加粗；并且加粗效果相同。

大部分字体不是免费的

有一点你须要知道：你所见到的大部分字体，都不是免费的。换句话说，若是你想用第三方字体从事商业活动，要先交钱，得到受权后才可使用。你在给公司作网页的时候，就是一种商业行为。

免费字体固然有，好比思源黑体（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，咱们通常也只使用在阿拉伯数字中；中文和英文，建议使用系统默认字体就行。

最后一段

所谓「见微知著」，一个再不起眼的知识点，也是有不少学问的。光是“字体”这一点，就足够成为一门学科。

2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：

当时的我历来没有期盼过我所学的这些东西，可以在个人生活中有什么实际的用处。

可是到了十年以后，当咱们在设计第一台 Macintosh 电脑时，这些所学都涌进了个人头脑。因而，我把这些设计融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。

能够说，若是我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac以后，彷佛全部的电脑都应该是这个样子。

当时的我没有办法把这些点点滴滴链接起来，可是，当我十年后回顾的时候，一切都变得豁然开朗。