设计师要懂这些代码知识（字体篇）！

作为一个有追求的Ui视觉设计师，我们常常在走查时面对程序员实现的设计页面欲哭无泪！不知道哪里不对，但是哪里都很别扭，和我们精心设计的效果图总有着微妙的差别，导致上线效果非常不尽人意。

到底问题出在哪里呢？我们又应该如何和程序员沟通，以实现自己想要的效果？如果你不懂下面这些代码知识，你无法跟程序员沟通、无法实现你想要的效果、更没法提高设计师的话语权。（搞不懂也没事收藏起来随时遇到问题看一下就好～）

一、不安装字体包，实现特殊字体的相关代码知识

现在特殊字体出现的越来越多，大家都知道在app内嵌入字体包即可实现，但是有时候我们需要在h5页面中使用，或者我们只是少量使用，内置字体包既增加了开发工作量又增加了安装包大小，这时候就需要考虑不安装字体包的方式实现特殊字体。

下面以数字字体为例讲下相关知识，先来看下小桔整理的四种数字字体：

DINOT: APP内常用内置字体，在股票、理财、科技类应用中使用最多；

DIN Alternate Bold: IOS、MAC OS系统自带字体，“%”设计的与数字不太协调；

WeChat Sans SS: 微信支付中使用的数字字体 (这是微信改进的数字字体，只有数字0-9 )；

DIN 30640 W04 Neuzeit GroteskBd：一款设计感更强的字体，包含英文和符号；与微信支付、百度有钱花的数字字体相似（在国外网站需要付费才让下载的字体，国内字体网站没有～）

百度网盘下载地址:https://pan.baidu.com/s/1JNmE5GLSFTo-OWUUPrX9Cw    密码: “小桔设计”公众号内回复 “密码2”

实现特殊字体的方法有两种：

① 使用系统自带字体（仅限数字/英文字体）

DIN Alternate Bold 是IOS、MAC OS系统中自带的字体，在app、h5中都可以直接指定使用该字体；（安卓系统没有该字体，故在安卓机上无效；安卓系统最接近的数字字体是：sans-serif-condensed;）

② 使用CSS3字体 “@fontface" 实现

原理是将字体文件存放到web服务器上，在需要时被自动下载到用户设备上，设计师不需要理解，可直接把链接发给前端开发人员即可：http://www.w3school.com.cn/css3/css3_font.asp

也可给前端参考百度线上页面: https://8.baidu.com/

(此法只适用于web和h5页面，所有字体均可用该法实现)

二、 与app开发人员对接需要的相关字体代码知识

① 安卓开发人员写出来的字体加粗有时会特别粗，作为ui这时你只需要告诉开发人员：把加粗样式写在代码内即在代码上加粗（设计师可以不用知道这句话到底是什么意思）；程序猿写的加粗之所以会比正常的粗是因为他们：把加粗样式写在了配置上

② 安卓系统里英文和数字有中等加粗( 与IOS、MAC OS中web/h5实现中等加粗一样都是用“font-weight: 500”实现 )，中文没有中等加粗；

三、 Web/H5中字体显示的基本原理

我们有时候会遇到这样的情况，在一段采用黑体中文段落里出现宋体数字/英文，就像下面这张图

这段文字的字体代码如下：

出现这种情况的原因，是因为前端在font-family的中文字体Pingfang SC前面加入了英文字体Times，由此得知系统选取字体顺序的原则：优先使用font-family中顺序靠前的字体 (在中文段落中出现的数字和英文属于于英文字体，避免上述情况的出现应该把英文字体要放在中文字体后面)

为了实现在苹果电脑中显示苹方字体，在windows里显示微软雅黑，我给前端的全局字体顺序通常是这样的： font-family: "Pingfang SC", "Hiragino Sans GB", "Helvetica", "Droid Sans", "Microsoft YaHei", "Arial", "sans-serif";

Pingfang SC: MAC OS 和 IOS系统系统字体，最先显示该字体；

Hiragino Sans GB: 苹方出来之前苹果系统的早期字体，考虑低版本OS系统中没有苹方字体的情况

Helvetica: 苹果系统中的英文字体

Droid Sans: 安卓系统默认中文字体（并不是网传的思源黑体哦）， 与Droid Sans Fallback的区别是，Droid Sans Fallback除了中文还兼容了日文、韩文

Microsoft Yahei：Windows系统字体

Arial: 苹果和windows系统中都有的无衬线英文字体

Sans-serif: 无衬线字体（字体的种类非字体），当前面所有字体都缺失时系统自动选用该类字体中的一种（这种情况极少发生）

如果设计师觉得苹方和雅黑字体中的数字/英文不够美观，想把中文里的数字/英文换成单独的英文字体，这时候就需要把英文字体放在中文字体前面（Helvetica放在Piangfang SC前面，把Arial放在Microsoft Yahei前面）

深度延展：

虽然上面的字体代码适用于99%的情况，但由于大部分设计师的电脑都是既装了苹方又装了雅黑，这就会导致使用win设备设计师的浏览器中显示苹果系统字体，解决的办法是告诉前端开发人员用JS判断用户操作系统，再根据操作系统显示不同的CSS字体样式，小米、天猫、百度等采取的就是这种方式（win系统中的CSS字体样式里不写入苹方字体）