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

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

文件结构目录
@font-face 加载字体引用字体之后不起作用_第1张图片

代码如下


<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 LAZYli>
				<li style="font-family:FZJZJW">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:LTCH">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:ONYX">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:ROCK">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:TCCM____">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				
			ol>

		footer>


	div>
body>

运行结果

@font-face 加载字体引用字体之后不起作用_第2张图片
后经过修改


<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 LAZYli>
				<li style="font-family:FZJZJW">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:LTCH">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:ONYX">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:ROCK">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				<li style="font-family:TCCM____">THE QUICK BROwN FOX JUMPS OVER THE LAZYli>
				
			ol>

		footer>


	div>
body>

结果2如下
@font-face 加载字体引用字体之后不起作用_第3张图片

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