作为一个有追求的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字体样式里不写入苹方字体)