• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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

当前位置：网站建设 > 优化推广

　　多字体 fallback 机制

　　多字体 fallback 机制：当指定的字体找不到（或者某些纯文本文字不支持这个字体）时，那就接着往后找。例如：

　　上方 CSS 代码的意思是：让指定tag标签元素中的纯文本文字，在 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: normal; // 相当于 400font-weight: bold; // 相当于 700

　　关键问题来了。很多人会发现，在 Windows 第三方平台的查看浏览器中， font-weight 无论是配置设置300、400、500还是600，纯文本文字的粗细都没有任何变化，只有到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才会加粗；而且加粗结果效果相同。

　　大部分字体不是免费的

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

　　免费字体当然有，例如思源黑体[2]（Adobe 和 Google 在2014年7月联合推出的一款开源字体）、阿里巴巴普惠体等。但这些免费字体，我们平时基本用不到。

　　这也就是为什么，很多公司企业会专门购买一套商用字体库、甚至是自己建设开发一套字体出来，避免未来潜在的纠纷和麻烦。

　　给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿，需要用 PS 软件打开源文件，才能看到里面的纯文本文字是什么字体。在 PS 软件里，当我们用光标选中字体的时候，出现了下面这种场景：

　　看到上面的FZLTZCHK，不要慌，马上去 Google 查一下，发现这个字体的全称是方正兰亭字体系列。恩，基本可以肯定， 这个字体也是要收费的。

　　这个时候，前端同学要马上告诉商品产品或者设计规划师，不要用这个字体，因为它是商用字体，是要收费的，小心吃官司。那我们该用什么字体呢？接着往下看。

　　网页页面一般用什么字体

　　大多数情况下，网页页面使用系统默认的字体就足够了。如果要使用特殊字体，顶多只是让阿拉伯数字使用特殊字体。中文和英文，使用默认字体，完全足够。

　　如果确实要使用特殊字体，只有这几种办法：

　　?使用开源的免费字体（例如思源黑体、阿里巴巴普惠体等）。但这类字体，种类很少，而且不是很好看。网页页面建设开发中，基本没人用。?单独购买商用字体，获得授权。?自己公司企业建设开发一套字体，给自己人用。

　　例如我所在的 JD 公司企业就自主建设开发了一套商用字体JDZH（只允许 JD 公司企业自己用，别家公司企业不允许用），支持三种粗细。如下：

　　@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之后，似乎所有的电脑都应该是这个样子。

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

　　?常见的免费字体：/a/1190000006110417?iconfont：/s/daKUNnF_Ste-O1l0sR89sQ?得到 | 从甲骨文至得到今楷，造字的人都是神：/s/ZnMxrhoH9piLf9EaSIwiGA

　　References

　　[1] serif，sans-serif，monospace，cursive和fantasy: /item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。