网页设计中如何正确使用特定字体

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

公众号：柠檬设计笔记