关于 font-family 字体属性,你一定要知道的使用方法


最近我在学习前端样式相关的知识,所以经常到一些大型网站看他们的页面布局,并且每次都能学到不少东西。

昨天在看了多个网站后,发现不同网站的字体样式是不一样的,对此产生了疑惑,他们是怎么做到的呢?

1. 不同网站字体的形成原因

在看了多个网站的 font-family 后,发现他们的描述都是不一样的,并且描述的差异很大,其中很多都是我不知道的,这就让我很想弄懂这玩意儿的使用方法了。

如下是我看到的几个网站的 font-family,他们的描述都有很大的不同。

(1)京东的 font-family

font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;

(2)飞书文档的 font-family

font-family: LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,Segoe UI,PingFang SC,Microsoft Yahei,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;

(3)石墨文档的 font-family

font-family: BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, 黑体, Heiti, sans-serif, SimSun, 宋体, serif;

在经过了一番学习后,我发现这个属性的作用真是太大了,它可以让你的网站在不同的设备上使用不同的字体,那它要怎么使用呢?接下来我逐步解释给你听。

2. 常见的字体类型

我们常用的网页字体类型,一般就以下这五种:

  • serif(衬线字体)
  • sans-serif(无衬线字体)
  • cursive(草书字体)
  • fantasy(幻想字体)
  • monospace(等宽字体)

2.1 serif(衬线字体)

衬线字体代表脚本的正式文本样式,一般是有收尾的笔划、喇叭形、锥形末端或具有实际衬线结尾的,具有装饰性细节的字形。

衬线字体展示:

衬线字体

2.2 sans-serif(无衬线字体)

通常垂直和水平的词干具有接近相同的粗细,并且笔画结尾很简单,没有任何喇叭形、交叉笔画或其他装饰。

无衬线字体展示:

衬线字体和无衬线字体的对比:

2.3 cursive(草书字体)

草书字体中的字形通常使用更非正式的脚本样式,结果看起来更像手写笔或毛笔字,而不是印刷字体。

草书字体展示:

2.4 fantasy(幻想字体)

幻想字体主要是装饰性或表达性字体,包含字符的装饰性或表达性表示。

幻想字体展示:

2.5 monospace(等宽字体)

等宽字体的唯一标准是所有字形都具有相同的固定宽度。这通常用于呈现计算机代码示例。

等宽字体展示:

2.6 新增的几种类型

w3 网站 中我还看到了几种新增的字体类型,同样也是很有作用的,分别是:

2.6.1 system-ui

此通用字体系列允许在平台上使用默认用户界面字体呈现文本。

2.6.2 emoji

此字体系列旨在与表情符号字符一起使用。表情符号是象形文字(图形符号),通常以彩色形式呈现并在文本中内嵌使用。

2.6.3 math

此字体系列旨在与数学表达式一起使用。

2.6.4 fangsong

该字体系列用于中文仿宋字体,它是宋(衬线)和楷(草书)之间的一种轻松的中间形式。通常,与宋体相比,水平线是倾斜的,端点花体较小,笔画宽度变化较小。常用于中国政府的官方文件。

2.6.5 ui-serif

该字体系列用于系统用户界面的衬线变体。ui-serif 的目的是允许 Web 内容与本机操作系统的外观和感觉集成。

macOS Catalina 和 iOS 13 上的示例 ui-serif 字体:纽约

2.6.6 ui-sans-serif

此字体系列用于系统用户界面的无衬线变体。ui-sans-serif 的目的是允许 Web 内容与本机操作系统的外观和感觉集成。

macOS Catalina 和 iOS 13 上的示例 ui-sans-serif 字体:旧金山

2.6.7 ui-monospace

此字体系列用于系统用户界面的等宽变体。ui-monospace 的目的是允许 Web 内容与本机操作系统的外观和感觉集成。

macOS Catalina 和 iOS 13 上的示例 ui-monospace 字体:SF Mono

2.6.8 ui-rounded

此字体系列用于系统用户界面的圆形变体。ui-rounded 的目的是让 Web 内容与本机操作系统的外观和感觉相结合。

macOS Catalina 和 iOS 13 上的示例 ui-rounded 字体:SF Rounded

3. font-family 中的字体写法

我们可以在 font-family 属性中添加上述字体类型,以表示你想让网站展现何种字体。

书写方式如下:

font-family: sans-serif;

4.常见系统的适用字体

4.1 适用于 Android 系统的字体

Roboto 是为 Android 操作系统设计的一个无衬线字体家族 。Google 描述该字体为“现代的、但平易近人”和“情绪化”的。该字体在 Apache 许可证下授权使用。

整个字体家族在 2012 年 1 月 12 日在新推出的 Android 设计网站 Android Design 上正式提出以供免费下载,这个字体家族包含 Regular 和 Thin、Light、Regular、Medium、Bold、Black 与 Condensed 版的斜体。

4.2 适用于 IOS、mac OS、tv OS、watch OS 的字体

San Francisco 是适用于运行 IOS、mac OS、tv OS、watch OS 的苹果设备的字体家族。

4.3 适用于 Windows 系统的字体

Segoe UI 是 windows 系统下默认的一种无衬线西文字体。

Microsoft YaHei(微软雅黑)是 Windows 系统默认的一套无衬线中文字体。

5. 浏览器支持的字体

并不是只要系统支持了某种字体,浏览器就能很完美地将字体展示出来,需要浏览器的开发者增加对某种字体的支持才行。

例如我们前文提到的 system-ui,它可以让浏览器展示不同操作系统的默认字体,但是需要此浏览器支持 system-ui

我们可以通过 caniuse.com 查看不同浏览器对 system-ui 的支持情况。

我们可以看到 IE11 并不支持此属性,但是 Chrome 102-103 版本支持这个属性,如果我们将带有 font-family: system-ui; 的网站通过 Chrome 打开,那么浏览器就可以展示默认地址。

6. 自定义 font-family

我们可以看看前文京东网站中的 font-family,它代表什么意思呢?

font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;

可以看到每个不同字体之间都是用,隔开,用;结尾。

Microsoft YaHei:优先使用微软雅黑;
Heiti SC:在 OSX / IOS 中使用此字体;
tahoma:在 Windows 系统中使用此字体;
Arial:在微软的应用中使用此字体;
Hiragino Sans GB:Heiti SC,则在 OSX / IOS 中使用此字体;
宋体:在 Windows 中可使用此字体;
sans-serif:若以上字体都找不到,那就使用无衬线的字体。

他们的优先级是从高到低的,先使用前面的字体描述,若找不到则使用后面的字体描述。

最后

以上就是 font-family 的使用方法了,我们讲解了常见的字体类型和适用于不同系统的字体,以及浏览器支持字体的查看方法,希望对你有所帮助。

1

评论

暂无评论

【关于 font-family 字体属性,你一定要知道的使用方法隶属于分类: 基础概念

它起初由本站用户:朱攀于1周前 创建。

该数据的链接是:

目录