帮你克服web字体选择焦虑症
作者:互联网
1.背景
前端时间产品经理问我,移动端web默认字体有哪些,哪些字体不侵权?我当时感觉这方面的知识很匮乏,只能回答出微软雅黑和苹方简体,平常写代码时,没怎么留意过font-family设置的字体属性,今天有空,决定学习一下这个知识点。
2.字体族的分类
字体族主要分为6大类:分别是serif(衬线),sans-serif(无衬线字体),monospace(等宽),cuisive(草体),fantasy(梦幻),emoji(表情)。web平常我们接触最多的就是衬线字体和无衬线字体。尤其是无衬线字体,文中将重点介绍。
2.1 serif(衬线)
serif字体的特点是在字的笔画粗细会不同,始末端风格比较突出,常见的衬线字体有Times New Roman、MS Georgia,宋体,仿宋等。
2.2 sans-serif(无衬线)
Sans-Serif字体没有这些额外的装饰,笔划粗细大致差不多,字形端庄,横平竖直,常见的无衬线字体有Tahoma、Verdana、Arial、Helvetica、苹方、微软雅黑,黑体、幼圆、隶书、楷体等。
sans-serif(无衬线字体)和serif(衬线字体)的区别
2.3 monospace(等宽)
等宽字体是指字符宽度相同的字体,通常用于编辑器以及技术文章的代码块中,等宽主要针对西文字体,中文汉字天然等宽,Courier、MS Courier New、Prestige,多数中文字体是最常见的等宽字体。
2.4 cuisive(草体)
特点:像手写的一样,Caflisch Script、Adobe Poetica,徐静蕾手写体、迷你简黄草、华文行草、少女体是手写体的代表。
2.5 fantasy(梦幻)
特点:艺术字,主要用于图片,页面上用的少 。代表字体有 WingDings、WingDings 2、WingDings 3、Symbol,萝卜体
2.6 emoji(表情)
顾名思义,无需过多解释。使用场景很好理解。
3.常见的操作系统自带字体
3.1 sans-serif字体--西文
字体名称 | 简介 |
---|---|
Helvetica | 苹果系统支持的一种西文无衬线字体,是苹果生态中最常用的一套西文字体。Helvetica Neue是Helvetica字体改善版本,增加了更多不同粗细与宽度的字形。 |
Arial | 是为了与Helvetica竞争而设计的无衬线西文字体,表现形式和Helvetica类似,在不同系统的浏览器都支持,兼容性非常好。 |
Tahoma | 一种无衬线字体,间距较小,在不同系统的浏览器都支持,兼容性良好,可以解决Helvetica和Arial所为人诟病的缺点,比如大写的 I 和小写的 L 难以分辨。 |
San Francisco | 苹果于2017年推出一种无衬线字体,也是目前苹果系统的默认西文字体,相比于Helvetica字体,San Francisco的字体风格更加简洁,减少了一些修饰的细节,支持符号的整体居中,比如时间显示,之前的 Helvetica 的冒号是不居中的。最低兼容版本:ios9、macOS10.11 |
Segoe UI | windows系统下的一种无衬线西文字体,也是windows系统的默认西文字体。 |
Roboto | Android系统的默认西文字体,也是一种无衬线字体 |
3.2 sans-serif字体--中文
字体 | 简介 |
---|---|
PingFang SC(苹方-简) | 苹果专为中国用户打造的一个中文无衬线字体,在2017年和San Francisco一起推出,SC代表简体,同时还有台湾繁体和香港繁体,整体造型简洁美观,是苹果系统默认的中文字体。最低兼容版本:ios9、macOS10.11 |
Hiragino Sans GB(冬青黑体)、Heiti SC(黑体) | 苹果系统中较早的中文无衬线字体,为了兼容旧版macOS系统,我们一般用它们作为苹方字体的fallback。 |
Microsoft YaHei(微软雅黑) | Windows系统默认的中文字体,也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑,但不包括safari浏览器。ios和android系统不支持微软雅黑,所以设置移动端字体时可以忽略微软雅黑。 |
Noto Sans (思源黑体) | Android系统的默认中文无衬线字体,由google推出的一款开源字体。 |
WenQuanYi Micro Hei(文泉驿微米黑) | Linux系统下默认中文字体,一般为了兼容Linux系统才会设置这个字体。 |
3.3 serif字体--中文
- 宋体: 一种中文衬线字体,windows 和 macOS都有支持,字体偏瘦,风格明显。宋体也是windows XP及更早系统的默认中文字体。
3.4 表情字体
字体 | 介绍 |
---|---|
Apple Color Emoji | 苹果产品的文字表情,在Mac和iOS系统中到处都可以看到,也是我们接触的最多的Emoji表情。 |
Segoe UI Emoji | Windows10系统中的Emoji表情,黑描边风格,没有苹果的圆润和质感。 |
Noto Color Emoji | Google推出的表情,和苹果的较为类似,更加扁平。 |
4.来看看各大网站的font-family设置 (查看时间-2022.01.09)
4.1天猫
body {
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
备注:汉字宋体的unicode是'\5b8b\4f53'
4.2京东
body{
font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
4.3腾讯网
body {
font: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
}
4.4百度
body{
font-family: Arial,sans-serif;
}
4.5博客园
body {
font-family: 'PingFang SC','Microsoft YaHei','Helvetica Neue','Helvetica','Arial',sans-serif;
}
4.6掘金
html {
font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial;
}
备注:
- -apple-system是system-ui的兼容写法,只在ios和macOS上的safari、Firefox、webview等环境下支持。
- system-ui是一种通用字体系列,它选择当前操作系统下的默认系统字体,它的优势在于和当前系统使用的字体相匹配,可以让Web页面和App风格看起来更统一。
4.7简书
body{
font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
}
评价:
- 当字体名称包含空格,则需要用双引号或单引号包裹。京东,掘金,简书有空格的字体名称写法不严谨。
- 每个系统都会带有无衬线字体,所以sans-serif一般放在最后作为兜底,sans-serif之后的字体都不会生效,除了Emoji字体。因此掘金的兜底字体写的不太规范。
5 总结
5.1 字体族选择
- 在显示设备上,衬线会让文字变得难以辨认,sans-serif无衬线字体适合在线阅读,是web页面全局字体设置首选。
- 衬线字体在打印的场景更容易阅读,让人更容易清楚区分不同字母。 serif 适用于打印页面
- monospace每个字符等宽,在页面上占据相同的空间,多用于页面上的代码块
- fantasy和cursive适用特殊艺术效果展示的场景,在图片或标题用的比较多。
5.2 字体使用原则
- 先西后中
中文网站涉及两种文字类型:西文字体和中文字体,西文字体包括英文数字等,不包括中文,但是中文字体一般包括英文和数字,但西文部分不好看,为了达到更好的显示效果,通常先定义西文字体,后定义中文字体。 - 系统兼顾
为了保证苹果系统中使用更优雅的中文字体,优先声明苹方简体, 对于不支持苹方的低版本macOS,使用Hiragino Sans GB(冬青黑体)字体做兜底。
如果需要兼容Linux系统,还需要添加WenQuanYi Micro Hei(文泉驿微米黑)字体。
如果需要兼容不同平台的表情符号,一般在sans-serif后添加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"等字体。 - 优先使用system-ui
system-ui使用当前系统的默认字体,让web页面和操作系统的风格统一,体验更好。 - 以sans-serif字体族兜底
当所有的字体都找不到时,我们可以使用字体族名称作为操作系统最后选择字体的方向。一般将sans-serif放在字体的后面,非衬线字体在显示器中的显示效果更好。
5.3 推荐字体设置
遵照以上四条原则,推荐的字体设置为:
font-family: system-ui, -apple-system, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
推荐理由:
- 优先设置system-ui,让web和app,pc的字体风格一致,-apple-system是ios和macOS上的safari、Firefox、webview上system-ui的兼容性写法
- 西文无衬字体优先选择Tahoma,Tahoma字体在小字号下结构清晰端整、阅读辨识容易,可以解决Helvetica和Arial所为人诟病的缺点,比如大写的I和小写的L难以分辨。在不同操作系统支持性好,所以作为首选字体,如果系统没有预装Tahoma,则使用Arial作为替代。Arial在ios和android上支持性很好。
- 中文无衬字体优先选择"PingFang SC","PingFang SC"造型简洁美观,是苹果系统默认的中文字体。"Hiragino Sans GB"是苹果系统早期的默认的中文无衬字体,为了兼容旧版macOS系统,用它作为苹方字体的fallback。"Microsoft YaHei"是Windows系统默认的中文字体,也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑。
- 如果前面的字体都不存在,使用sans-serif兜底。
- 最后大多数字体都有版权,而这些字体都是系统内置字体,不会涉及到侵权。
参考文章
标签:web,sans,Helvetica,焦虑症,system,serif,字体,衬线 来源: https://www.cnblogs.com/wangpenghui522/p/15781984.html