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)
在这里插入图片描述
(2)依次点击上传字体、最佳、协议和下载套件在这里插入图片描述
(3)解压压缩包即可得到其他扩展名的字体
3.在自己的Web项目中建立的fonts文件夹中导入下载好的字体
在这里插入图片描述
4.将字体包中自带的stylesheet.css样式表导入项目的css文件夹下,并修改@font-face的src路径
在这里插入图片描述
5.在.html文件中导入css样式表
在这里插入图片描述
6.在stylesheet.css样式表中给自己想要添加该样式的属性添加样式,这里的font-family属性值必须和@font-face中的一样。
在这里插入图片描述
7.保存代码,运行即可。

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值