网站模板下载

CSS3中引入多种自定义字体font-face

作者 font-face 2020-08-13 456

这篇文章主要介绍了 CSS3中引入多种自定义字体font-face, 文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧!

今天在HTML中发现了一个问题,提供给我们默认的字体有很多,但是除了那些“黑体”、“宋体”、“楷体”等支持中文字体之外,其余的都不知道中文字体,如果我们需要用自己喜欢的字体怎么办呢?CSS3中是否可以引入自定义下载的字体呢?如果可以我们应该怎么引入?带着这一系列的问题我们来看下解决方案,说什么都不如看效果,下面是三种字体在网页中的效果,“春联标准字体”、“江南艺术调字体”和“毛浙东艺术字体”的效果:

谷歌浏览器:

CSS3中引入多种自定义字体font-face-好哇网

火狐浏览器:

CSS3中引入多种自定义字体font-face-好哇网

以上就是效果展示,大家有个了解就可以了!
接着我们看下怎么在CSS中引入:

首先我们要引入某个字体,就应该有这么个字体,(用户不需要有),下载字体放到项目的font文件夹下面。

字体下载大家在网上自行下载,下载完成之后我们就来引入字体

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体文件测试</title>
	</head>
	<body>
		<div class="chunlian">春联标准字体测试</div>
		<div class="jiangnan">江南艺术调字体测试</div>
		<div class="maozedong"> 毛泽东字体测试</div>
	</body>
</html>

然后就是CSS样式设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
<style type="text/css">
@font-face {
	font-family:'chunlian';
	src: url(font/chunlian.ttf);
}
@font-face {
	font-family: 'jiangnan';
	src:url(font/jiangnan.ttf);
}
.chunlian{
	font-family: 'chunlian';
	font-size: 50px;
	text-shadow: none;
}
.jiangnan{
	font-family: 'jiangnan';
	font-size: 40px;
}
@font-face {
	font-family: 'maozedong';
	src:url(font/maozedong.ttf);
}
.maozedong{
	font-family: 'maozedong';
	font-size: 50px;
	text-shadow: none;
}
</style>

 

如果再加入其他字体直接在CSS中写@font-face即可!

到此这篇关于CSS3中引入多种自定义字体font-face的文章就介绍到这了,更多相关CSS3引入自定义字体font-face内容请搜索好哇网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持好哇网!

分享给朋友 CSS3中引入多种自定义字体font-face-好哇网

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!
好哇网 » CSS3中引入多种自定义字体font-face

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号