提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
避免与前端工程师互殴指南(二)
01#背景与问题
前阵子在帮助「响应式网页项目A」做视觉走查,当用不同的浏览器打开 dev-www.@#¥.com 的时候猛然发现
项目A的设计师在设计时,使用了 Noto Sans CJK TC(思源繁体)做为字体样式,但没有一个浏览器能够正常显示出来,甚至在 Safari 浏览器上的字体全部变成了 Songti TC(宋体繁体),以及 SVG 切图里的按钮文字也从思源繁体变成了宋体繁体
02#浏览器上显示的字体与声明的字体不一致
图中 CSS 字体设置 font-family 后面的值确实声明了 Noto Sans CJK TC(思源繁体),但右边显示当前生效的字体却是 Songti TC(宋体繁体),因为 Safari 浏览器目前只要使用的不是系统预置的字体都无法被识别,无论本地是否安装了该字体包
针对字体显示的解决办法有三种:
01.内嵌字体包
如项目大部分内容必须要使用某种特定的字体,那么可以在网页中内嵌字体包,但为了兼容不同的浏览器需要获取当前字体至少2~3种文件格式,才能确保在主流浏览器中都能正常显示
同时中文字体包过大,也会增加用户首次加载网站的时间,可能将会在这多出的加载时间里流失很多用户,慎选
02.不设置 font-family,使用浏览器的默认字体
但在不同的操作系统和不同的浏览器中,内嵌的默认字体都不同,且相同字体在不同的操作系统里渲染的效果也不同,因此会影响页面排版和美观
03. font-family 字体堆栈
设置多个字体名称,如当前浏览器不支持第一个字体,将会尝试下一个,浏览器会使用它可以识别的第一个值可以看看微博是怎么写的
知乎
字体的设置并没有固定的标准,需要根据业务情况进行定夺
03#SVG 切图里的按钮文字从思源繁体变成了宋体繁体
当网页小部分内容需要用到特殊字体时,可以将文字切图给到开发小哥哥,在响应式的项目中,切图尽量使用 SVG 格式,主要优势在于可以任意缩放且不会破坏清晰度
但在输出 SVG 文件时需要注意,大多数浏览器并不支持 SVG 的格式的字体,因为无法识别该字体,就会使用浏览器预置中“相近”的字体去替代,因此在切图前,将字体转为路径,就能正常显示
04#分享环节
题外话,分享一个小红书 UED 团队制作的网站,记录52个设计原则,界面简洁,交互有趣,附上地址~
https://rpdc.xiaohongshu.com/52-design-principles
公众号:柠檬设计笔记
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册