你不一定知道的CSS中字体的相关知识

字体族：serif,sans-serif,monospance,cursive(网页中使用较少),fantasy(花体),字体族是一类字体，而不是特定字体，如：monaco字体属于monospace（等宽字体族），simsun字体属于serif（衬线字体）。

 

对于网页中具体的字体，这里是Microsoft Yahei需要用引号引起来，而字体族serif，不能加引号，如下：

多字体fallback:当本地系统中找不到Microsoft Yahei1字体时，使用任意serif字体，见上图。

 

定义如下图字体，PingFang SC是苹果电脑默认渲染的字体,而window系统网页默认渲染字体大多是Mircosoft Yahei，这取决你系统设置的默认字体是什么，如下，如果你使用的是window系统，PingFang SC因为是苹果字体，所以失效，接着找后面一个，如果monaco在你本地系统中存在，即使用该字体，如果不存在就使用默认字体。

 

网络字体、自定义字体，如何使用？

Html结构中任意定义个样式类，名字最好具有语义化，如下：

@font-face声明自定义字体，font-family是自定义字体名称，src：url(),可以是下载好的本地字体，也可以是网络地址，当引用网络地址加载时，如果失败，可能时跨域问题。

.custom-font中的font-family是引用font-face中定义的名称。如下：

显示结果如下：

查看网页中渲染使用了那种字体，如下：

Rendered fonts中显示的就是当前渲染英文使用的是我们下载的indieflower字体，而渲染中文使用的系统默认Microsoft Yahei字体。

自定义字体，引入的为英文字体，所以显示结果的图中的你好被fallback，采用系统默认的中文字体Microsoft Yahei,而Hello World是英文所以使用IF这个英文字体，即url地址中的indieflower字体

Iconfont图标字体的使用

进入https://www.iconfont.cn/，搜索想要的图标，如果你需要一套图标，可以添加入库。

 

1.              2.  3.

下载至本地。打开demo_index.html

根据以上操作，完成iconfont字体图标的使用。