UI设计师必知的字体代码知识小桔设计

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

THE END
1.App字体设计规范App字体设计规范 APP UI字体设计规范,这些或许你还不知道 APP UI在设计的时候对字体的运用还是需要经验积累的,不是随便往上一摆就行了,其中还有很多的技巧和技法,今天为大家整理出来了2017年最简单明了的app界面设计字体规范。 一、字体选择 1、IOS:苹果https://www.jianshu.com/p/1fe39ea39d02
2.字体设计相似应用下载字体设计app有哪些2022 字体设计软件免费的有哪些2022 换字体app下载 炫字体app下载 蛋糕字体转换软件 签名字体下载 字体美化管家下载 字体安装app下载 娃娃字体app下载 字体精灵app下载 疯狂字体app下载 myriadproregular字体下载 字体软件 字体管家app 字体助手app下载 下载https://m.wandoujia.com/apps/7391379
3.超赞!史上最全的43款字体设计工具大集合优设网如果你想要学习字体设计,或者想要提高字体设计技巧?更或是想要在轻松的娱乐中就提高对字体的认识?那赶紧读一下这篇文章吧! 这篇文章介绍了43款涵盖 iOS、Android 还有 Web 的字体设计应用。那么,到底有哪些呢?待我们一一道来: 01.PicLab 利用照片编辑器,快速给照片添加流行的字体。 https://www.uisdc.com/43-font-design-tools-and-app
4.做字体设计用什么软件好?这5款足够了字体设计在现代视觉传达中扮演着重要角色,而选择适合的字体设计工具是字体设计师必不可少的一步。那么,做字体设计用什么软件好?在众多的字体设计工具中,即时设计、FontCreator、RoboFont、Fontlab 8 和 Glyphs这 5 个软件备受设计师关注。一起来看看吧! https://js.design/special/article/doing-font-design.html
5.字体立体设计app字体设计字体分类发现字体字体立体设计app 标签: 字体设计 最后更新: 2024-11-13 共 6个字体 简介: 字体立体设计app S?hne Schmal Leicht语言:英文 Rotunda-Regular语言:英文 S?hne Schmal Kursiv语言:英文 Rotunda-Black语言:英文 Rotunda-MediumItalic语言:英文 Rotunda-Bold语言:英文http://www.qiuziti.com/fontlist2?id=861557
6.自做字体的app有啥用?自做字体的app有啥用? 字体设计是一种很有意思的创意工作,可以通过自己喜欢的风格和风格进行创造性表达,让自己的创作获得更多的自由度和个性化。在过去,这种工作需要大量的计算机软件和硬件来进行,但随着智能手机和平板电脑的流行, 字体设计是一种很有意思的创意工作,可以通过自己喜欢的风格和风格进行创造性表达,让https://www.yimenapp.com/kb-yimen/24138/
7.app设计字体规范.pdf*次级内容字体大小:36PX *底部导航内容字体大小:28PX 2.###颜色 (1)*主背景色:#F3F3F3 *登录页面背景色:#FaFaFa *主前景色:以APP主色调为准 *次级前景色:以设计效果图为准,具体到时候填上。 (2)*标题颜色:#FFFFFF *主内容颜色:#333333 https://m.book118.com/html/2024/0314/8062141051006045.shtm
8.Fontiyapp下载Fontiy(手写字体设计)下载v1.6安卓版Fontiy是一个手写字体设计工具.在手机上制作一款原创手写字体,应用会自动保存您的书写草稿,方便用户随时阅览字体、查看字体设计进度.使用Fontiy软件,轻松制作各种优雅的手写字体.欢迎感兴趣的用户来IT猫扑下载应用! Fontiy app介绍 Fontiy(手写字体)在设置一个你的专属字体,只需要轻松的几步就能将你的手写英文字体变成https://m.itmop.com/downinfo/330327.html
9.app界面设计字体规范A:选择App界面和UI设计界面的字体时,应考虑易读性、一致性、对比度、可访问性、个性化、字体大小、行间距和字间距等因素,通过综合考虑这些因素,可以创建一个既美观又易于使用的应用程序或UI设计。 2. Q:为什么在选择App界面和UI设计界面的字体时要考虑可访问性? https://www.kdun.com/ask/53506.html
10.字体签名设计app下载字体签名设计app安卓版下载v13想要在一众签名中脱颖而出吗?快来试试《字体签名设计》APP吧,这款软件可以为设计一个独一无二的个性签名,只要输入自己的名字就可以一键设计,还可以自己 选择不同的字体以及样式,生成之后还可以下载保存到本地,便于练习和上传发送,有需要的小伙伴们千万不要错过了。 https://www.crsky.com/soft/253229.html
11.字体签名设计app下载字体签名设计手机版下载v13.0.3字体签名设计 简介 字体签名设计这是一款专门设计签名的app,在这里的功能非常齐全,同时不论是参加一个什么活动或者是给别人签字,通过设计的签名会让你变得更加的与众不同,只需要输入自己的名字,直接点击生成即可,非常的方便快捷。 《字体签名设计》软件亮点: 1.我们的签名适用于各种场景,在正式场合你可以签你的名字https://gps.it168.com/detail/63150.html
12.字体下载字体电脑版下载字体app2024下载电脑字体软件用于管理、浏览和安装字体,以及进行字体的设计和编辑。电脑字体软件不仅可以帮助用户更好地管理自己电脑中已有的字体,还可以通过下载新的字体来满足用户的需求。同时,它们还提供了丰富的字体效果和特殊字体样式,让用户可以轻松地为自己的文档、设计和网站添http://www.onlinedown.net/zt/80286/
13.在线设计协作软件,Web/app界面设计工具,免费云端字体MasterGo 是一款专业智能的 UI/UX 设计工具和原型播放,支持专业矢量编辑,智能辅助功能,团队在线协作,设计实时交付,一站式完成高保真产品设计。https://mastergo.com/design
14.安卓ios网页常用字体以下属于app界面设计常用字体的是?2. 在每个项目设计中只使用1到2个字体样式,通过对字体大小或颜色来强调重点文案,如图的界面设计中,都是通过字体大小、粗细来区分界面内容中的层级关系。字体用得越多,越显得不够专业; 3、不同样式的字体,形状或系列最好相同,以保证字体风格的一致性; https://blog.csdn.net/weixin_44180173/article/details/123648806
15.手机字体APP下载好用的手机字体APP手机字体APP大全艺术设计是以平面设计为基础的,而字体设计又是平面设计的重要组成部分。因此不论是平面设计,抑或是字体设计,二者在人类的发展史上都发挥着不可磨灭的作用。 字体的重要性,可想而知,小编今天就给大家带来多年收集的手机字体APP大全,希望大家在工作学习中能熟练运用掌握!http://www.kkx.net/zt/88801.html
16.免费更换字体app有哪些免费更换字体app推荐更换字体app通常具备字体对比功能,让用户能够方便地比较不同字体之间的区别,以便选择最合适的字体,一些高级字体软件还提供字体设计功能,允许用户创建自定义的字体,包括调整字体的字形、大小、粗细等参数,软件可以帮助用户管理计算机上已安装的字体,方便用户查看、筛选和选择合适的字体。https://app.ali213.net/heji/mfghztapptj.html
17.字体软件app排行榜前十名偏玩手游盒子分享十大字体软件app排行榜前十名手机应用,编辑为您推荐手机字体软件app排行榜第一名到前5名到前十名的应用。找字体软件app有哪些、字体软件app哪个好用,上偏玩手游盒子https://m.pianwan.com/s/zj-1084633