设计师的小小沉淀

为什么网页定义字体族时,最后一个都是sans-serif?

2021-03-23  本文已影响0人  很小一颗雨

总结:

为了保证网页文字显示效果,避免因字体定义不生效,应用系统默认字体导致网页视觉效果不可控的问题。

sans-serif是无衬线体,是一类字体(互联网经常使用无衬线体,相比衬线体,不易引起视觉疲劳),它在操作系统或者浏览器里是可以设置的(设置的这种字体肯定是当前系统里存在的),使用这个字体就一定能生效,加上sans-serif能保证调用


一. 案例

美院

美院

清华大学信息设计系

清华大学信息设计系

摩登天空

摩登天空

Apple

apple

volusion【国外】

volusion

二. 了解sans-serif

什么是sans-serif?

sans-serif是无衬线体,是一类字体。它在操作系统或者浏览器里是可以设置的,设置的这种字体肯定是当前系统里存在的字体,所以使用这个字体就一定能显示出来,加上sans-serif就能保证调用

Chrome设置-外观

为什么用sans-serif? 不用serif

字体大致可以分成衬线字体 serif 和无衬线字体sans-serif。

衬线指的是字母结构笔画之外的装饰性笔画,比如宋体就是典型的有衬线字体,常用于印刷。

央美-衬线字体

在互联网时代,用的最多的是无衬线字体,比如微软雅黑。所以在 UI 设计中,主要界面框架基本使用的就是无衬线字体。

为什么在互联网时代,用的最多的是无衬线字体?

衬线字体从审美角度较为正式优美,然从眼睛的感受并不及无衬线的黑体字,因为衬线体在笔划上有过多的点缀(笔划末端的小三角),很容易造成视觉疲劳(尤其是显示在萤幕上时)。出于上述原因,大部分网页使用无衬线字体。 ——维基百科

北大-无衬线字体


三. 为什么放在最后一个?

定义font-family字体族后,字体是从左到右的顺序调用。在最后加一个sans-serif,这样如果所列出的字体都不能用,则默认的sans-serif字体就能保证调用

所以代码常规写法中,最后通常都会带一个sans-serif:

上一篇 下一篇

猜你喜欢

热点阅读