关于前端:Web-字体-fontfamily-浅谈

72次阅读

共计 7703 个字符,预计需要花费 20 分钟才能阅读完成。

前言

最近钻研各大网站的 font-family 字体设置,发现每个网站的默认值都不雷同,甚至一些大网站也犯了很显著的谬误,阐明字体还是有很大学识的,值的咱们好好钻研。

不同的操作系统、不同浏览器下内嵌的默认字体是不同的,谬误的字体设置会导致页面在不同环境渲染的凌乱,抉择一套适合的字体是打造优良网页的第一步。通过本文,咱们会介绍字体的知识点,并摸索在 PC 和 Mobile 两端该如何正确的设置字体。

字体基础知识

字体的分类

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

这些不是指某一个字体,而是一个字体族,是一系列字体的汇合。咱们接触最多的就是衬线字体和无衬线字体。

serif(衬线字体) & sans-serif(无衬线字体)

Serif 的意思是,在字的笔划开始及完结的中央有额定的装璜,而且笔画的粗细会有所不同。衬线字体的格调都比较突出,常见的衬线字体有 Times New Roman 宋体

Sans Serif 字体没有这些额定的装璜,笔划粗细大抵差不多,字形端庄,横平竖直,常见的无衬线字体有 TahomaVerdanaArialHelvetica 苹方 微软雅黑 等等。

monospace(等宽字体)

等宽字体是指字符宽度雷同的字体,通常用于编辑器以及技术文章的代码块中。courier 是最常见的等宽字体,而对于中文每个汉子都是等宽的。

fantasy(梦幻字体) & cuisive(草书字体)

在浏览器中应用的场景不多。

font-family 属性

设置元素的字体,能够同时指定多个,如果浏览器不反对第一个字体,则会尝试下一个,能够设置字体或字体系列。

如:font-family: Arial, sans-serif;

如果不设置 font-family 则应用浏览器默认字体,如果设置的 font-family 有效,也会 fallback 到浏览器的默认字体。

常见字体介绍

Helvetica

苹果零碎反对的一种西文无衬线字体,是苹果生态中最罕用的一套西文字体。Helvetica NeueHelvetica 字体改善版本,减少了更多不同粗细与宽度的字形。

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-CNen时体现也有可能不同,尽管都是无衬线字体,但差别很显著。即使 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-systemsystem-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 个别用在字体定义的最初作为兜底。

PC 端浏览器能够在设置中指定 sans-serif 字体。

挪动端浏览器不能在设置中指定 sans-serif 字体,它们会依据 lang 指定的语言环境抉择适合的字体,和 system-ui 指定的字体不肯定雷同。

每个零碎都会带有无衬线字体,所以 sans-serif 个别放在最初,sans-serif之后的字体都不会失效,除了 Emoji 字体。

书写字体规定

在介绍字体规定前,有几点是须要留神的:
1、不同平台,预置的字体并不相同。比方 Helvetica 和苹方也只有苹果零碎内置,微软雅黑只有 windows 零碎内置,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;

windows 系统对 system-ui 兼容性不好,所以只有

举荐写法 2:
指定字体

font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

windows 零碎电脑屏幕分辨率广泛不高,Tahoma字体在小字号下构造清晰端整、浏览辨识容易,在不同操作系统支持性好,所以作为首选字体,如果零碎没有预装 Tahoma,则应用Arial 作为代替。但两者差异不大,Arial优先级提前也行。

须要须要兼容 Linux 零碎和表情符号,能够增加 WenQuanYi Micro HeiEmoji字体,如:

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 后面设置 HelveticaSegoe UI为首选字体,如:

font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

留神:
字体的设置没有固定规范,须要依据业务状况进行定夺,以上只是举荐写法,如果设计师有要求能够在此基础上进行改变。

指定元素字体

当给某个元素设置了 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 的默认中文字体因为喇叭口设计被诟病已久。当然京东这么设置必定是有他们的思考,然而中文字体放在tahomaarial 等西文字体前还是不倡议的。

天猫首页
"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 SCNoto Sans CJK SC这两个都是思源黑体,尽管是开源字体,然而在大部分零碎中都没有内置,这里设置是不是没必要?有晓得的同学能够解答一下吗?

头条首页
PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif

也是如同下面提到的,Helvetica Neue,Arial等西文字体倡议放在后面。

在此重申,以上仅是集体教训观点,如有谬误欢送指出????

参考链接

Web 字体 font-family 再探秘
你该晓得的字体 font-family
字体,以及 font-family
如何优雅的抉择字体 (font-family)
从 Web 字体谈起——默认字体款式设置
PingFang SC 不应该作为挪动端网页字体的首选项
iOS 9 字体的介绍与应用

正文完
 0