CSS字体的font-family属性和@font-face使用方法

CSS字体的font-family属性:

font-family属性一共有5个字体系列,分别是:
sans-serif: 包括没有衬线的字体,与serif相比,通常认为sans-serif在计算机屏幕上更容易识别。
在这里插入图片描述

serif: 包括有衬线的字体,看到这种字体就会想到新闻报纸的文字排版。
在这里插入图片描述

monospace: 包含固定宽度的字符,例如,一个“i”在水平方向所占宽度与一个“m”所占宽度是相同的,主要用于显示软件代码示例。
在这里插入图片描述

cursive: 包括看似手写的字体,有时会看到标题中运用这些字体。
在这里插入图片描述

fantasy: 包含有某种风格的装饰性字体。
在这里插入图片描述

使用规则
例子:给body标签添加样式

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

通常指定的font-family包含一个候选字体系列列表,它们都来自同一个字体系列。
候选字体要完全按照输入要求进行输入,大小写必须一致
最后总是放一个通用的字体系列名,如“sans-serif”,“serif”,因为计算机会从第一个字体开始查看电脑上是否有这个字体,如果有这个字体则应用这个字体,如果没有就会查询下一个字体,要是全部候选字体都没有查到则会使用浏览器默认的“sans-serif”字体(根据最后一个来决定使用什么默认字体),这就是为什么需要在最后面添加通用字体系列名的原因。

@font-face规则的使用:

这个规则允许你定义一种字体的名字和位置,然后可以在你的页面使用。
使用步骤:
1.先从字体网站下载自己需要的字体
2.确保下载的字体中包含所需字体的所有格式
常用字体扩展名包含:“.ttf”,“.otf”,“.eot”,“.svg”,“.woff”
如果没有的话可以进入网站(https://www.fontsquirrel.com/)进行如下操作:
(1)进入网站,点击发电机(Generator)
CSS字体的font-family属性和@font-face使用方法_第1张图片
(2)依次点击上传字体、最佳、协议和下载套件CSS字体的font-family属性和@font-face使用方法_第2张图片
(3)解压压缩包即可得到其他扩展名的字体
3.在自己的Web项目中建立的fonts文件夹中导入下载好的字体
CSS字体的font-family属性和@font-face使用方法_第3张图片
4.将字体包中自带的stylesheet.css样式表导入项目的css文件夹下,并修改@font-face的src路径
CSS字体的font-family属性和@font-face使用方法_第4张图片
5.在.html文件中导入css样式表
CSS字体的font-family属性和@font-face使用方法_第5张图片
6.在stylesheet.css样式表中给自己想要添加该样式的属性添加样式,这里的font-family属性值必须和@font-face中的一样。
CSS字体的font-family属性和@font-face使用方法_第6张图片
7.保存代码,运行即可。

你可能感兴趣的:(css,web)