Web 字体 font-family 浅谈
前言
最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究。
不同的操作系统、不同浏览器下内嵌的默认字体是不同的,错误的字体设置会导致页面在不同环境渲染的混乱,选择一套合适的字体是打造优秀网页的第一步。通过本文,我们会介绍字体的知识点,并探索在PC和Mobile两端该如何正确的设置字体。
字体基础知识
字体的分类
- serif(衬线)
- sans-serif(无衬线)
- monospace(等宽)
- fantasy(梦幻)
- cuisive(草体)
这些不是指某一个字体,而是一个字体族,是一系列字体的集合,我们接触最多的就是衬线字体和无衬线字体。
serif(衬线字体) & sans-serif(无衬线字体)
Serif的意思是,在字的笔划开始及结束的地方有额外的装饰,而且笔画的粗细会有所不同。衬线字体的风格都比较突出,常见的衬线字体有Times New Roman
、宋体
。
Sans Serif字体没有这些额外的装饰,笔划粗细大致差不多,字形端庄,横平竖直,常见的无衬线字体有Tahoma
、Verdana
、Arial
、Helvetica
、苹方
、微软雅黑
等等。
monospace(等宽字体)
等宽字体是指字符宽度相同的字体,通常用于编辑器以及技术文章的代码块中,等宽主要针对西文字体,而对于中文每个汉子都是等宽的,courier是最常见的等宽字体。
fantasy(梦幻字体) & cuisive(草书字体)
在浏览器中使用的场景不多,不多做介绍。
font-family属性
设置元素的字体,可以同时指定多个,如果浏览器不支持第一个字体,则会尝试下一个,可以设置字体或字体系列。
如:font-family: Arial, sans-serif;
如果不设置font-family则使用浏览器默认字体,如果设置的font-family无效,也会fallback到浏览器的默认字体。
常见字体介绍
Helvetica
苹果系统支持的一种西文无衬线字体,是苹果生态中最常用的一套西文字体。Helvetica Neue
是Helvetica
字体改善版本,增加了更多不同粗细与宽度的字形。
Arial
是为了与Helvetica竞争而设计的无衬线西文字体,表现形式和Helvetica类似,在不同系统的浏览器都支持,兼容性非常好。
Tahoma
一种无衬线字体,间距较小,在不同系统的浏览器都支持,兼容性良好,可以解决Helvetica和Arial所为人诟病的缺点,比如大写的 I 和小写的 L 难以分辨。
San Francisco
苹果于2017年推出一种无衬线字体,也是目前苹果系统的默认西文字体,相比于Helvetica
字体,San Francisco
的字体风格更加简洁,减少了一些修饰的细节,支持符号的整体居中,比如时间显示,之前的 Helvetica
的冒号是不居中的。
最低兼容版本:ios9、macOS10.11
PingFang SC(苹方-简)
苹果专为中国用户打造的一个中文无衬线字体,在2017年和San Francisco
一起推出,SC代表简体,同时还有台湾繁体和香港繁体,整体造型简洁美观,是苹果系统默认的中文字体。
最低兼容版本:ios9、macOS10.11
Hiragino Sans GB(冬青黑体)、Heiti SC(黑体)
苹果系统中较早的中文无衬线字体,为了兼容旧版macOS系统,我们一般用它们作为苹方字体的fallback。
Segoe UI
windows系统下的一种无衬线西文字体,也是windows系统的默认西文字体。
Microsoft YaHei(微软雅黑)
Windows系统默认的中文字体,也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑,但不包括safari浏览器。
ios和android系统不支持微软雅黑,所以设置移动端字体时可以忽略微软雅黑。
宋体
一种中文衬线字体,windows 和 macOS都有支持,字体偏瘦,风格明显。
宋体也是windows XP及更早系统的默认中文字体。
WenQuanYi Micro Hei(文泉驿微米黑)
Linux系统下默认中文字体,一般为了兼容Linux系统才会设置这个字体。
Roboto
Android系统的默认西文字体,也是一种无衬线字体
Noto Sans (思源黑体)
Android系统的默认中文无衬线字体,由google推出的一款开源字体。
Apple Color Emoji
苹果产品的文字表情,在Mac和iOS系统中到处都可以看到,也是我们接触的最多的Emoji表情。
Segoe UI Emoji
Windows10系统中的Emoji表情,黑描边风格,没有苹果的圆润和质感。
Noto Color Emoji
Google推出的表情,和苹果的较为类似,更加扁平。
浏览器默认字体
默认字体分为系统默认字体和浏览器默认字体,这两者是不同的。
这里我们讨论的是浏览器默认字体,系统默认字体会在下面的system-ui
中介绍。
当元素没有指定font-family或者设置的font-family无效时,会fallback到浏览器默认字体。
PC端
PC端的浏览器支持设置不同的默认字体。
下图是chrome的配置选项,标准字体就是默认字体,当font-family属性没有设置时会启用这个字体。
因为Arial是西文字体,对中文无效,浏览器会选择合适的中文字体,在Windows上一般为微软雅黑,在macOS一般为苹方。但是部分浏览器会根据默认字体的风格选择近似的中文字体,Arial是无衬线字体,浏览器也会选择一种无衬线字体适配中文,如果默认字体是衬线字体,那么浏览器就会选择一种衬线中文字体,为了抹平这种差异,我们通常在font-family最后设置sans-serif
指定无衬线字体作为兜底。
移动端
移动端浏览器通常不支持指定默认字体。
ios的默认中文字体为苹方,当lang设置为zh-CN
,西文也是苹方。当lang不设置或者设置为en
时,西文默认字体为Times New Roman
,一种衬线字体。
<!DOCTYPE html>
<html lang='zh-CN'>
...
android的字体稍微复杂,它的的默认字体为西文:Roboto,中文:Noto Sans (思源黑体)
,但不同厂商可能会使用自定义的字体,比如小米部分手机使用的是小米兰亭。
android端lang设置为zh-CN
或en
时表现也有可能不同,虽然都是无衬线字体,但差异很明显。即便lang都设置为zh-CN
,不同的安卓机上的默认西文字体表现也有可能是不同的,一个字形容:乱。
以上提到的移动端系统版本:ios9+ android4+
正是由于浏览器默认字体的复杂体现出设置font-family的重要性。
system-ui
system-ui
是一种通用字体系列,它选择当前操作系统下的默认系统字体,它的优势在于和当前系统使用的字体相匹配,可以让Web页面和App风格看起来更统一。
使用方式
font-family: system-ui;
兼容性
system-ui
推出的时间较晚,但兼容性比较不错,目前主流的浏览器都已经支持。
下图是Can I Use
上统计的兼容信息
-apple-system
-apple-system
是system-ui
的兼容写法,只在ios和macOS上的safari、Firefox、webview等环境下支持。
BlinkMacSystemFont
也是system-ui
的兼容写法,只在macOS chrome下支持,主要针对chrome 53-55版本
效果
在ios和macOS上,system-ui
指向的中文字体为苹方,西文字体为San Francisco
。android系统下中文通常为Noto Sans (思源黑体),西文字体为Roboto。windows系统上一般为微软雅黑,但是在部分windows系统上的字体会出现问题,所以windows上不建议使用system-ui。
sans-serif(无衬线字体)
在现行主流终端设备中,无衬线体比有衬线体更易读,无衬线体更适合作为网页的默认全局字体设置。
每个系统都会带有无衬线字体,所以sans-serif
一般放在最后作为兜底,sans-serif
之后的字体都不会生效,除了Emoji
字体。
PC端浏览器可以在设置中指定sans-serif
字体。
移动端浏览器不能在设置中指定sans-serif
字体,它们会根据lang
指定的语言环境选择合适的字体,和system-ui
指定的字体不一定相同。
书写字体规则
在介绍字体规则前,有几点是需要注意的:
1、不同平台,预置的字体并不相同。比如Helvetica
和苹方也只有苹果系统内置,微软雅黑只有windows系统内置(由于很多人安装Office的缘故,Mac电脑中也会出现微软雅黑字体),android 和 iOS 系统内置的字体各不相同。
2、字体是有版权的,但是如果没有引用外部字体文件(如 Web font 或者内嵌到 App 中),而仅仅是在 CSS 中指定字体名称,不需要购买授权,因为其只是一段声明,表示期望浏览器优先使用某种字体渲染文本。
3、中文网站涉及两种文字类型:西文字体和中文字体,西文字体包括英文数字等,不包括中文,但是中文字体一般包括英文和数字,我们一般先设置西文字体,后设置中文。
4、如果字体包含空格或者是中文,需要添加引号。
5、大部分字体全名中会包含字体粗细、斜体(italic)、长体(condensed)等具体属性,但一般不建议直接使用,字体的风格应该在 CSS 中通过 font-weight、font-style、font-stretch等属性指定,由浏览器决定实际渲染的字体。
6、font-family属于可继承属性,全局的font-family一般设置在body元素上。
我们可以总结字体定义的大概规则如下:
1、西文在前,中文在后
中文字体大多都包含西文,但西文的部分又不好看,而西文不包含中文,通常先定义西文,后定义中文以达到更优的显示效果。
2、优先使用system-ui
system-ui
使用当前系统的默认字体,让web页面和操作系统的风格统一,体验更好。
3、兼顾不同的操作系统
选择字体的时候要考虑不同的操作系统,还需要考虑旧版本操作系统的用户。
即便是同一个字体在不同的操作下也会有细微的差别,我们要尽量做到相同系统使用同一种字体,保证同一个系统下的字体一致性。对于不同系统尽量保证字体风格接近,比如都使用无衬线字体。
为了保证苹果系统中使用更优雅的中文字体,优先声明苹方字体, 对于不支持苹方的低版本macOS,使用Hiragino Sans GB(冬青黑体)
字体做兜底。
如果需要兼容Linux系统,还需要添加WenQuanYi Micro Hei(文泉驿微米黑)
字体。
如果需要兼容不同平台的表情符号,一般在sans-serif
后添加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
等字体。
4、以serif或sans-serif字体族结尾
为了保证在各种不同环境或条件下显示正常,我们一般将sans-serif
放在字体的后面,非衬线字体在显示器中的显示效果更好。
5、简洁实用
字体设置并不是越多越好,在能满足设计需求的情况下尽量简洁。相同系统下中西文字体各有一个fallback即可,不需要太多。
字体设置
通过字体的知识点和字体设置规范介绍,我们总结出全局默认字体的设置方式。
移动端
兼容版本:ios9+、android4+
推荐写法:
font-family: system-ui, -apple-system, Arial, sans-serif;
解读:优先使用system-ui
,使用Arial
做西文字体的fallback是因为它和Helvetica
字体相似,并且在ios和android支持性很好。
PC端
推荐写法1:
macOS系统优先使用系统字体
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
推荐写法2:
指定字体
font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
windows系统电脑屏幕分辨率普遍不高,Tahoma
字体在小字号下结构清晰端整、阅读辨识容易,在不同操作系统支持性好,所以作为首选字体,如果系统没有预装Tahoma
,则使用Arial
作为替代。但两者差别不大,Arial
优先级提前也行。
需要需要兼容Linux系统和表情符号,可以添加WenQuanYi Micro Hei
和Emoji
字体,如:
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
如想突出macOS和windows的字体特色,可以在Tahoma
前面设置Helvetica
或Segoe UI
为首选字体,如:
font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
注意:
1、字体的设置没有固定标准,需要根据业务情况进行定夺,以上只是推荐写法,如果设计师有要求可以在此基础上进行改动。
2、css的font-family
权重是高于浏览器默认字体的,有一些网站选择不设置font-family,使用浏览器的默认字体,倾向于用户的选择,这就是仁者见仁了。
指定元素字体
当给某个元素设置了font-faimily
后,全局默认字体则对这个元素无效,这时也要考虑字体兼容问题,最好指定一个fallback字体,并以sans-serif结尾。
div {
font-faimiy: "PingFang SC", sans-serif;
}
各大网站font-family点评
首先声明,以下仅为个人观点,如有错误欢迎指出
以下数据取值时间:2020-11-25
淘宝首页
tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif
\5b8b\4f53
为宋体的Unicode编码,这样可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
淘宝首页的默认字体非常简洁,但是在macOS上使用的中文字体为无衬线的冬青黑体,而在windows上使用的是衬线字体宋体,两个系统字体表现差异还是很明显的。
京东首页
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
京东首页使用微软雅黑作为首选字体,这样中英文都会为微软雅黑,在macOS safari默认是不支持微软雅黑所以会fallback到Heiti SC(黑体)
,而黑体作为较早版本macOS的默认中文字体因为喇叭口设计被诟病已久。当然京东这么设置肯定是有他们的考虑,但是中文字体放在tahoma
、arial
等西文字体前还是不建议的,除非设计师或业务要求。
天猫首页
"Microsoft YaHei",SimSun,'\5b8b\4f53',sans-serif
SimSun
:也是宋体
天猫首页默认字体设置和京东类似,首选中英文都是微软雅黑,上面说到过macOS safari默认是不支持微软雅黑,所以会fallback到宋体,宋体是衬线字体,导致macOS上其它浏览器和safari浏览器字体差异很大。
下图分别为macOS10.14.5下,chrome和safari的效果
腾讯网首页
'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
腾讯网首页也是以微软雅黑作为中西文首选字体,并且在不同系统上都有相应的fallback,理论上是不错的,但还如同上面所说,除非设计师或业务需要,不建议以中文字体开头。
新浪微博
Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif
新浪微博的默认字体个人觉得是非常好的。
掘金首页
-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial
掘金这里犯了一个非常明显的错误,在sans-serif
后定义了其它中英文字体,因为sans-serif
后定义的中英文字体都是无效的。掘金作为大神云集的地方,犯这么低级的错误实在不应该。
segmentfault首页
-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif
个人觉得很好。
知乎首页
-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif
Source Han Sans SC
、Noto Sans CJK SC
这两个都是思源黑体,虽然是开源字体,但是在大部分系统中都没有内置,这里设置是不是没必要?
头条首页
PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif
也是如同上面提到的,Helvetica Neue,Arial
等西文字体建议放在前面。
在此重申,以上仅是个人经验观点,如有错误欢迎指出
参考链接
Web 字体 font-family 浅谈的更多相关文章
- Web Service进阶(七)浅谈SOAP Webservice和RESTful Webservice
浅谈SOAP Webservice和RESTful Webservice REST是一种架构风格,其核心是面向资源,REST专门针对网络应用设计和开发方式,以降低开发的复杂性,提高系统的可伸缩性.RE ...
- Web在线视频方案浅谈
写在前面 最近因为项目预研,花时间和精力了解并总结了现如今web在线视频的一些解决方案,由于资历薄浅,措辞或是表述难免出现遗漏,还望各位海涵,有好的建议或方案还望赐教,定细心学习品位. 如今的web技 ...
- Web API之路由浅谈
Web API的路由,是指明接口地址的方向,是照亮获取数据路上的灯塔,其重要性不言而喻. 本篇文章以vs2015为例,一步步说明路由的创建及使用,其中包括默认路由.自定义路由和特性路由. 一.默认路由 ...
- Web框架本质及浅谈HTTP协议
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...
- Web前端原生JavaScript浅谈轮播图
1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...
- web server性能优化浅谈
作者:ZhiYan,Jack47 转载请保留作者和原文出处 Update: 2018.8.8 在无锁小节增加了一些内容 性能优化,优化的东西一定得在主路径上,结合测量的结果去优化.不然即使性能再好,逻 ...
- WEB安全之Token浅谈
Token一般用在两个地方——防止表单重复提交.anti csrf攻击(跨站点请求伪造). 两者在原理上都是通过session token来实现的.当客户端请求页面时,服务器会生成一个随机数Token ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 浅谈_IDEA导入Eclipse的Web项目
相信很多同学在工作中都会遇到将一个Eclipse的Web项目导入IDEA的情景,这里浅谈一下具体的操作流程 一:Import Project,选择要导入的项目 二:选择以Eclipse模型的方式导入 ...
随机推荐
- mysql-8.0.16-winx64.zip安装教程详解
摘自:https://zhuanlan.zhihu.com/p/48531203 mysql-8.0.16-winx64.zip安装教程详解下载地址:https://dev.mysql.com/get ...
- 单点突破:Spring(上)
Spring概述 我们常说的 Spring 实际上是指 Spring Framework,而 Spring Framework 只是 Spring 家族中的一个分支而已.Spring 是为了解决企 ...
- 使用有道云笔记还是github写笔记的优缺点对比
有道云笔记的优点 在手机上编辑笔记,有道云的体验更好,建议:新建普通类型笔记而不是markdown笔记,因为md在手机上的编辑体验并不好 插入图片方便无需考虑图床 可以把笔记分享到社交平台(QQ,微信 ...
- NX二次开发-获取WCS标识
函数:UF_CSYS_ask_wcs() 函数说明:获取工作坐标系对象的标识. 用法: 1 #include <uf.h> 2 #include <uf_csys.h> 3 e ...
- 【NX二次开发】Block UI NXOpen::BlockStyler::BlockDialog
定义: NXOpen::BlockStyler::BlockDialog* theDialog; theDialog->PerformApply();//执行应用并重新启动对话框. theDia ...
- jQuery04
jQuery内容总结: 1.既然是一个js库,使用之前就要引入js库,是一个.js文件,版本是1.8.3: 2.写一个jQuery页面加载函数(注意与js页面加载函数的区别): $(function( ...
- Air530Z GPS/北斗定位模块_设计指导手册_V1.2
下载PDF版本: Air530Z_定位模块_设计指导手册_V1.2.pdf @ 目录 1. 模块整体说明 2. 资料下载 3. 模块性能 4.模块管脚图 5.参考设计电路 6.GPS天线 6.1 无源 ...
- 题解 P2257 YY的GCD
P2257 YY的GCD 解题思路 果然数论的题是真心不好搞. 第一个莫比乌斯反演的题,好好推一下式子吧..(借鉴了blog) 我们要求的答案就是\(Ans=\sum\limits_{i=1}^{n} ...
- 「csp-s模拟测试(9.18)」Set·Read·Race
昨天考试考得有点迷??? 一看内存限制,T1 64MB T2 16MB 当场懵比......... T1 set 考场打的背包问题和随机化,其实能randA掉,但不小心数组开小了????(长记性!!! ...
- 『无为则无心』Python序列 — 19、Python列表的其他操作(切片和遍历)
目录 1.通过切片对列表的操作 (1)通过切片对列表进行修改 (2)通过切片对列表进行删除 (3)注意 2.列表的循环遍历 (1)while循环遍历 (2)for循环遍历 3.列表嵌套 4.综合示例 ...