作为一个有追求的Ui视觉设计师，我们常常在走查时面对程序员实现的设计页面欲哭无泪！不知道哪里不对，但是哪里都很别扭，和我们精心设计的效果图总有着微妙的差别，导致上线效果非常不尽人意。
现在特殊字体出现的越来越多，大家都知道在app内嵌入字体包即可实现，但是有时候我们需要在h5页面中使用，或者我们只是少量使用，内置字体包既增加了开发工作量又增加了安装包大小，这时候就需要考虑不安装字体包的方式实现特殊字体。
DINOT:APP内常用内置字体，在股票、理财、科技类应用中使用最多；
DINAlternateBold:IOS、MACOS系统自带字体，“%”设计的与数字不太协调；
百度网盘下载地址:
密码:“小桔设计”公众号内回复“密码2”
实现特殊字体的方法有两种：
①使用系统自带字体（仅限数字/英文字体）
DINAlternateBold是IOS、MACOS系统中自带的字体，在app、h5中都可以直接指定使用该字体；（安卓系统没有该字体，故在安卓机上无效；安卓系统最接近的数字字体是：sans-serif-condensed;）
②使用CSS3字体“@fontface"实现
(此法只适用于web和h5页面，所有字体均可用该法实现)
①安卓开发人员写出来的字体加粗有时会特别粗，作为ui这时你只需要告诉开发人员：把加粗样式写在代码内即在代码上加粗（设计师可以不用知道这句话到底是什么意思）；程序猿写的加粗之所以会比正常的粗是因为他们：把加粗样式写在了配置上
②安卓系统里英文和数字有中等加粗(与IOS、MACOS中web/h5实现中等加粗一样都是用“font-weight:500”实现)，中文没有中等加粗；
三、Web/H5中字体显示的基本原理
我们有时候会遇到这样的情况，在一段采用黑体中文段落里出现宋体数字/英文，就像下面这张图
这段文字的字体代码如下：
出现这种情况的原因，是因为前端在font-family的中文字体PingfangSC前面加入了英文字体Times，由此得知系统选取字体顺序的原则：优先使用font-family中顺序靠前的字体(在中文段落中出现的数字和英文属于于英文字体，避免上述情况的出现应该把英文字体要放在中文字体后面)
为了实现在苹果电脑中显示苹方字体，在windows里显示微软雅黑，我给前端的全局字体顺序通常是这样的：font-family:"PingfangSC","HiraginoSansGB","Helvetica","DroidSans","MicrosoftYaHei","Arial","sans-serif";
PingfangSC:MACOS和IOS系统系统字体，最先显示该字体；
HiraginoSansGB:苹方出来之前苹果系统的早期字体，考虑低版本OS系统中没有苹方字体的情况
Helvetica:苹果系统中的英文字体
DroidSans:安卓系统默认中文字体（并不是网传的思源黑体哦），与DroidSansFallback的区别是，DroidSansFallback除了中文还兼容了日文、韩文
MicrosoftYahei：Windows系统字体
Arial:苹果和windows系统中都有的无衬线英文字体
Sans-serif:无衬线字体（字体的种类非字体），当前面所有字体都缺失时系统自动选用该类字体中的一种（这种情况极少发生）
如果设计师觉得苹方和雅黑字体中的数字/英文不够美观，想把中文里的数字/英文换成单独的英文字体，这时候就需要把英文字体放在中文字体前面（Helvetica放在PiangfangSC前面，把Arial放在MicrosoftYahei前面）
深度延展：
虽然上面的字体代码适用于99%的情况，但由于大部分设计师的电脑都是既装了苹方又装了雅黑，这就会导致使用win设备设计师的浏览器中显示苹果系统字体，解决的办法是告诉前端开发人员用JS判断用户操作系统，再根据操作系统显示不同的CSS字体样式，小米、天猫、百度等采取的就是这种方式（win系统中的CSS字体样式里不写入苹方字体）