自定义字体@font-face

最新推荐文章于 2025-06-21 13:35:48 发布

原创最新推荐文章于 2025-06-21 13:35:48 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

5 篇文章

订阅专栏


/* 自定义字体必须要有的属性：
		1.font-family自定义字体名称
		2.src指字体来源url表示路径
		使用的时候，就和平时使用字体一样
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>423自定义字体</title>
		<style type="text/css">
			@font-face{
				/* 自定义字体  名称 */
				font-family: "selffont";
				/* 自定义字体  字体文件所在路径 */
				src:url("China.ttf");
			}
			h1{
				display: inline-block;
				font-size: 100px;
			}	
			.self1{
				/* 使用自定义字体 */
				font-family: "selffont";
				font-size: 100px;
				/* 通过字体改变图片颜色 */
				color: red;
			}
			.self2{
				/* 使用自定义字体 */
				font-family: "selffont";
				font-size: 100px;
				color: red;
				
			}	
	    </style>
	</head>
	<body>
		<h1>自定义字体</h1>
		<span class="self1">?</span>
		<span class="self2">Ã</span>
		
	</body>
</html>