ui设计师要懂这些代码知识(字体篇)!

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容