@font-face 加载字体引用字体之后不起作用

最新推荐文章于 2024-01-01 22:19:30 发布

的天

最新推荐文章于 2024-01-01 22:19:30 发布

阅读量5.9k

点赞数 1

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/qq_42035639/article/details/115296641

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如题，最近在学习css的时候遇到如下情况
使用@font-face加载多种字体不起作用
反思：是我搞错了，字体加载可能就是要一条一条的写

文件结构目录
在这里插入图片描述

代码如下

<!doctype html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
	
		@font-face{
		font-family: BOOMBOX;src: url(font/BOOMBOX.TTF);
		font-family: FZJZJW;src: url(font/FZJZJW.TTF);
		font-family: LTCH;src: url(font/LTCH.TTF);
		font-family: ONYX;src: url(font/ONYX.TTF);
		font-family: ROCK;src: url(font/ROCK.TTF);
		font-family: TCCM____;src: url(font/TCCM____.TTF);
}
		
	</style>
	<title>第三次作业</title>
</head>
<body>
	
	<div>
		<footer >
			<p>字体测试</p>
			<ol>
				<li style="font-family:BOOMBOX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:FZJZJW">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:LTCH">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:ONYX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:ROCK">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:TCCM____">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				
			</ol>

		</footer>


	</div>
</body>

运行结果

在这里插入图片描述
后经过修改

<!doctype html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
	
		@font-face{font-family: BOOMBOX;src: url(font/BOOMBOX.TTF);}
		@font-face{font-family: FZJZJW;src: url(font/FZJZJW.TTF);}
		@font-face{font-family: LTCH;src: url(font/LTCH.TTF);}
		@font-face{font-family: ONYX;src: url(font/ONYX.TTF);}
		@font-face{font-family: ROCK;src: url(font/ROCK.TTF);}
		@font-face{font-family: TCCM____;src: url(font/TCCM____.TTF);}	
	</style>
	<title>第三次作业</title>
</head>
<body>
	
	<div>
		<footer >
			<p>字体测试</p>
			<ol>
				<li style="font-family:BOOMBOX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:FZJZJW">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:LTCH">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:ONYX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:ROCK">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				<li style="font-family:TCCM____">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li>
				
			</ol>

		</footer>


	</div>
</body>

结果2如下
在这里插入图片描述

的天

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
@font-face 加载字体引用字体之后不起作用

如题，最近在学习css的时候遇到如下情况使用@font-face加载多种字体不起作用反思：是我搞错了，字体加载可能就是要一条一条的写文件结构目录代码如下<!doctype html><head> <meta charset="utf-8"> <style type="text/css"> @font-face{ font-family: BOOMBOX;src: url(font/BOOMBOX.TTF); font-fami
复制链接

扫一扫