by 用友云平台 刘文杰写于2019年3月 我们的产品界面如何呈现最完美的字体，最有效的、清晰的传播信息，满足高效工作需求？如何为用户端的系统、浏览器选择文字，完美显示英文、简中、繁中以及全球化？
1、限制条件
操作系统：Windows 7 / Windows 10 / Mac Os...浏览器：IE 11以上 / Chrome /火狐/ Safari...多语言：简体中文、繁体中文、英文...全球化
2、B端产品的文字特点是什么？
B端产品服务的文字特点1、不存在大篇幅阅读类文章2、工作界面文字要求清晰易读3、有业务属性及年龄跨度问题4、图表、列表、表单较多5、实用为主不强调修饰，无衬线体应用较多6、B端产品中的文字信息主要场景是被用户扫描，而非阅读。总结下来，B端业务界面的特点决定了字体的选择：支持大小字号通吃、清晰易读。优先选择较醒目的Sans Serif（非衬线）字体，系统用户需要显著、醒目，但不必长时间盯著这些字来阅读。
3、兼顾不同的操作系统（MacOs、Win），了解各平台的默认字体情况
作为一个设计师，需要对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解，特别是中文。 3.1、Window下：
3.2、Mac OS下：
了解完以上平台的字体情况，要同时给予 windows 用户和 mac 用户最好的字体体验，我们可以这样声明：font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif;这句声明都做到哪些事情呢？让我们一一说明（括号内代表其对应的目标操作系统）：对于英文字符，首先查找Helvetica(Mac)，然后查找Tahoma(Win)，都找不到就用Arial(Mac&Win)；若是以上三者都缺失，则使用当前默认的sans-serif字体(操作系统或浏览器指定)；对于中文字体，我们已经了解其规则了。华文细黑(Mac)，微软雅黑(Win)是这两个平台的默认中文字体。
4、需要适当考虑向下兼容
中文市场还有大量的用户在使用神奇的Windows XP，宋体才是他们的主要中文字体。为了照顾到这些用户，你可以为微软雅黑增加一个 fallback：font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", Heiti, "黑体", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;你看到我们也为 Mac 系统使用了黑体作为 fallback。 为什么先mac后win呢？在中文字体的用户群体里，很大一部分拥有 Mac 的人都同时安装了 Win 下常用的中文字体（这得归功于 Office for Mac）；但极少有 Win 用户去安装 Mac 下的中文字体。因此，把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响（因为他们压根没有！），倒是用来做 fallback 的黑体可能会取代微软雅黑的位置，所以更保险的做法或许是这样：font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
5、web端简中、繁中、英文显示的最优字体
英文：Verdana（win）、San Francisco（移动）简体：微软雅黑（win）、苹方（os）繁体："微軟正黑體","Microsoft JhengHei"（win）
6、我们的系统如何使用字体？
6.1、字体的中英文写法：我们在操作系统中常常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，一般字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示，但是有一些用户的特殊设置会导致中文声明无效。比如说，用户安装了中文版的操作系统（这意味着系统有中文字体），但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候，操作系统很有可能无法按照显示名称找到正确的字体，所以我们要记住的第一件事情就是： 同时声明中文字体的字体名称（英文）和显示名称（中文），如下示例：font-family: STXihei, "Microsoft YaHei"; font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑"; 6.2、声明英文字体：永远不要忘记声明英文字体，并且英文字体应该在中文字体之前。绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，但是大多数中文字体中的英文和数字的部分都不是特别漂亮（基本上都很丑），所以建议对英文字体进行声明。由于英文字体中大多不包含中文，我们可以先进行英文字体的声明，这样不会影响到中文字体的选择，因此优先使用最优秀的英文字体，中文字体声明则紧随其次。如下示例：font-family: Arial, "Microsoft YaHei"; 6.3、照顾不同的操作系统：英文、数字部分：在默认的操作系统中，Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体，从显示效果来看，Tahoma要比Arial更加清晰一些，因此字体设置Tahoma最好放到前面，当找不到Tahoma时再使用Arial；而在Mac中，还拥有一款更加漂亮的Helvetica字体，所以为了照顾Mac用户有更好的体验，应该更优先设置Helvetica字体；Android系统下默认的无衬线字体就可以接受，因此无需单独设置。最后，英文、数字字体的最佳写法如下： font-family: Helvetica, Tahoma, Arial; 中文部分：在Win下，微软雅黑为大部分人最常使用的中文字体，由于很多人安装Office的缘故，Mac电脑中也会出现微软雅黑字体，因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择；同样，为了保证Mac中更为优雅字体苹方（PingFang SC）、黑体-简（Heiti SC）、冬青黑体（ Hiragino Sans GB ）的优先显示，需要把这些字体放到中文字体列表的最前面；同时为了照顾到Linux操作系统的体验，还需要添加文泉驿微米黑字体。最后，中文字体部分最佳写法如下： font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; 中英文整合写法：font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; 6.4、注意向下兼容如果还需要考虑旧版本操作系统用户的话，不得不加上一些旧版操作系统存在的字体：Mac中的华文黑体、冬青黑体，Win中的黑体等。同样按照显示效果排列在列表后面，写法如下：font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "MicrosoftYaHei", SimHei, "WenQuanYi Micro Hei";加入了 STXihei（华文细黑）和 SimHei（黑体）。 6.5、补充字体族名称字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加 sans-serif，写法如下：。font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
7、其他影响字体显示的因素？
从目前用户反馈的情况来看，在以 12px 大小为主的网页设计中，最佳的中文默认字体方案是：Windows 下用宋体，其他操作系统下用雅黑等无衬线字体。未来随着电脑屏幕的变大和分辨率的提高，当字体的默认大小提高到 14px 以上时，或许所有操作系统下，最佳中文默认字体会统一为雅黑等无衬线字体。为了让所有网页在尽可能多的情况下，都用最佳中文字体渲染，需要特别考虑以下几点：
可以总结出：
font-family: arial, sans-serif; 无论省略 lang 还是设置为 zh-CN, 在各种环境下都满足预期。
font-family: arial; Chrome OS 下未测试，根据陈成博客上的反馈，好像会因为没有 sans-serif 而导致中文字体很难看。不过考虑 Chrome OS 还未正式发布，目前可以先忽略。最后，个人推荐简体中文页面的最佳实践为：html lang=zh-CN charset=utf-8 font-family: arial, sans-serif; 测试环境说明：Mac OS X 10.6.7Chrome 10.0.648.204Firefox 4.0Safari 5.0.4Opera 11.01Win7 UltimateIE 9.0.8080.16413
9、多语言的自动适配问题
这里暂时不考虑语言文字的密度、间距对齐问题，重点解决正常、友好、清晰的显示。font-family: 'Helvetica Neue', sans-serif;字体栈设置了 Helvetica 和 「非衬线」字体族，如果是中文字体，Helvetica 默认 Fallback 到下一字体，而下一个字体sans-serif 则根据系统设置进行渲染。iOS 系统里对于中文字体默认使用 「PingFang」，简体为「PingFang SC」，繁体为「PingFang TC」。结合定位的 font-family 问题，主要有两种解决方案。
操作第二点，局限性比较大。因为仅针对一种字体进行设置，如果未来引入了新字体，则同样会出现这个问题；我比较倾向于设置 lang 属性解决：更新 html 的 <html> 标签为 <html lang="cmn-Hans">，使浏览器默认使用普通话的简体中文作为显示语言进行渲染。CSS的font-family命令，指定了网页元素所使用的字体。下面是一个例子。font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
10、uapdesign3.0字体设定
苹方和San Francisco为苹果推出的最新字体，显示效果也最为优雅，但只有最新系统才能支持，而黑体-简和Helvetica可以获得更多系统版本支持，显示效果也相差无几，可以接受。
在 Windows 下，sans-serif 会默认采用「宋体」；OS X 下的「华文黑体」本就是通用选择。「Arial」换为「Tahoma」、「Verdana」等均可，可视设计而定。(可能引起文本对齐问题)实在需要使用 GB2312/GBK 时，推荐去掉「sans-serif」，否则 Win 7 IE8+ 会错误使用「Gulim」。(亦可为 IE 写单独的 font-family)
11、应用场景说明
为保证更好的展示，我们增加了补充字体家族用于对应场景
12、一些建议
最好是使用大多数人的机器上可能有的常见的truetype字体。Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体，中文里面Windows自带宋体、黑体及楷体。如果你使用不常见的字体，不要忘记为没有此字体的浏览器指定替代的字体。通过css设置font-family来制定字体集，浏览器可以顺序查找使用你制定的一系列字体，让你的页面看起来还不错。
如果你的页面相当乏味，没有图像，那么尝试设置促体的浓淡度（通过css的font-weight特性），这会使页面更生动。使用不用的浓淡度不仅可以使页面更吸引人，它还是组织信息的最有效的方法之一。
如果你要在同一页面中使用两种字体，它们应该来自两种不同的字型类别。
pt（磅）最早是用于印刷的字号，在windows和mac os里面，相同的pt值会对应不同的px（像素）值。唯一可靠的单位，就是px。
如果你设置了固定的字号，比如12px，那么，对于普通浏览者来说，这是没什么问题的，但是如果你的网站的浏览者包括老人和视力有问题的人群，那么这个尺寸就太小了，最好提供个他们可以选择页面字体的权利。 通常内容应用的字体,font-family:宋体,微软雅黑,Arial,Verdana,arial,serif。通常标题应用的字体,font-family:font-family:宋体,微软雅黑,Arial,只是字号的大小不一样。通常的字体大小,font-size:12px或14px。让网页显示微软雅黑效果通常这样写CSS代码font-family:微软雅黑,宋体。这样网站首选微软雅黑，如果用户未安装微软雅黑字体，就默认显示宋体。在新版本的CSS3，可以使用 @font-face 调用一些其他的字体库，弊端是，用户在访问的时候要去下载这个文件，所以会影响整个网站的效率。Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. font-family: arial,helvetica,sans-serif; 二、可达性 Accessibility满足WCAG AAA级要求（清晰的显示）默认AAA+级对比度文字颜色及字体，满足大部分用户对文字信息的清晰识别。
iuapdesign3.0提供“自然而然 Naturally”的体验，视觉的“可访问性”、“看得见”，对用户而言就是自然而然的基本要求，我们坚持认为：可访问的视觉设计才是好的视觉体验设计。全球色盲人数：4.5%（每12名男性有一个色盲；每200名女性有一个色盲）；全球色弱人数：4%（每30个人有一个色弱）；全球盲人：0.6%（每188个人有一个盲人）；年龄问题：在40到50岁之间，眼睛的晶状体和睫状肌开始失去弹性，我们眼睛在不同距离的聚焦越来越困难了。当您手持一本书，阅读书本的过程中眼睛离书的位置越来越远：因为大多数设计师本身并都没有遇到这样的问题，我们很容易忘记我们的用户包含在此，忘记我们在为更广大的用户进行设计。 在目前，对视觉缺失人员的“可达性”并未写入法律。也就是说，社会并未关爱他们。所以，当前商业设计中的所谓的“可达性”还是虚伪的。是唱高调的一种很做作的表达。我们满足的还是正常视觉人群的“可达性”。
2、遵循国家标准GB2893―82安全色基本要求
中国大陆已制订了安全色国家标准且规定用红、黄、蓝、绿四种颜色作为中国通用的安全色。四种安全色的含义和用途如下：•红色：表示禁止、停止、紧急告警等。设计禁止信号、停止信号、事故信号，以及表示防火、消防设备及其位置等，一般都使用红色•黄色：表示危险、警告、注意等。在设计警戒标志时多使用黄色•蓝色：表示指令，用于提醒人们必须遵守规定，如必须佩戴个人防护用具等•绿色：表示提示、安全、通行等。设计安全通道、安全防护设备及其位置标志、行人和车辆放行标志等，一般都采用绿色•黑、白两种颜色：一般作安全色的对比色，主要用作上述各种安全色的背景色，例如安全标志牌上的底色一般采用白色或黑色。 正确的使用文字颜色，所有语义文字的配色符合大众心理。此类文字色彩在iuapdsign3.0的“信息反馈”“link”“系统目视化规范”等均提供标准一致的应用。色彩作为人类的第二种语言：5S/6S/7S管理工具之颜色管理（视觉语言）
3、正确的使用文字颜色
正如我们强调“自然而然 Naturally”的体验，自然界中是不存在的纯黑甚至纯灰色的，纯正的黑色（#000000）会非常的突出，会显得不自然，日常生活中看到的黑色都不是纯黑，而是深灰。自然的灰色是环境中光会为其着上色调的呈现，因此所有灰色都是着了色的灰，界面中如果使用纯灰色，灰因为丢失色彩倾向而在与主色的配搭上会不协调、不自然。所以iuapdesign的默认文本色采用略带冷色调的深灰色，以及在此基础上做色价延伸的浅灰色。用户在阅读、浏览时，白色具有100％的颜色亮度，黑色具有0％的颜色亮度。色彩亮度的这种巨大差异导致用户看到的亮度级别不一致。这导致他们的眼睛在阅读时难以适应亮度。
4、符合WCAG对可达性的基本要求
人阅读电子文字的速度要比阅读纸质文字要慢40%,在正常的光线下阅读时，多数人为了感知一个文字而进行的观察时间需50-60毫秒。阅读并不是自然的人类活动。根据Sousa 2005年的实验结果，它是一种人造的、通过系统的直到和训练获得的能力，a.用户很少逐字逐句阅读。b.前两段最重要，应该包含你的营销妙语。c.起始段、副标题、重点列表中要带有诱人的关键词。
参考：
浏览器如何渲染文本（推荐）
最佳 Web 中文默认字体（推荐）
如何优雅的选择字体(font-family)
多语言版本Web系统中对应多种字体(Font Family)。
https://www.cnblogs.com/leichi/archive/2012/06/12/2546458.html?utm_source=tuicool&utm_medium=referral