web前端入门到实战:耐人寻味的CSS属性font-family

感情迁移 提交于 2019-12-02 09:28:05

font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性。

衬线字体

衬线(serif)的笔画有粗有细的变化,在每一笔画上都自有风格,笔画末端会有修饰,强调艺术感,适合用于博客,旅游,文化,艺术类网站。

无衬线字体

无衬线(sans-serif)的字体工整方正,给人正式的感觉,适合政务类,企业类网站使用。

中文字体

Windows

  • simsun,宋体,也是windows下大部分浏览器的默认字体,font-size较大时清晰度不佳。
  • Microsoft Yahei,无衬线字体,微软雅黑,是微软委托中国方正设计的一款中文字体。

Mac OS

  • STHeiti,华文黑体,OS X 10.6之前的简体中文系统界面默认字体,也是目前Chrome游览器下的默认字体。
  • STXihei,华文细黑,比STHeiti文字更细。
  • Heiti SC,黑体-简,从 OS X 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,显示效果不错,但是喇叭口设计遭人诟病。
  • Hiragino Sans GB,冬青黑体,清新的专业印刷字体,小字号时足够清晰,拥有很多人的追捧。
  • PingFang SC,苹方,在Mac OS X EL Capitan上,苹果为中国用户打造,去掉了为人诟病的喇叭口。

Linux

  • WenQuanYi Micro Hei,文泉驿微米黑,Linux最佳简体中文字体。

英文字体

Windows

  • Arial,无衬线西文字体,显示效果一般。
  • Tahoma,无衬线字体,显示效果比Arial要好。
  • Verdana,无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。

Mac OS

  • Times New Roman,衬线字体,Mac平台Safari下默认的字体。
  • HelveticaHelvetica Neue,被广泛使用。
  • San Francisco,与苹方一样,mac os最新的西文字体。

font-family设置原则

  • 西文优先:西文字体中大多不包含中文,西文优先,中文紧随其后,这样就不会影响到中文字体的选择。
  • 从新到旧:优先体验最好的字体,向下兼容。
  • 兼容多种操作系统:考虑windows, mac os, android, linux等系统。
  • 补充字体族:最后根据衬线serif或无衬线sans-serif来补充字体族,当所有设置的字体都找不到时,让操作系统有选择字体的方向。

如果你依然在编程的世界里迷茫,不知道自己的未来规划,打算深入了解这个行业的朋友,我们的前端学习扣qun :767273102,不论你是学生还是想转行的朋友,我都欢迎,每晚分享干货,网页制作,网站开发,web全栈开发,从0基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系路线图】都有整理,分享给小伙伴:学习前端我们是认真的

font-family推荐

font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!