css自定义字体（@font-face的使用）

最新推荐文章于 2025-04-28 15:30:26 发布

原创最新推荐文章于 2025-04-28 15:30:26 发布

· 641 阅读

1 ·

版权

文章标签：

#css #css3 #前端

首先获取需要使用字体文件，此处以LetsgoDigitalRegular.ttf'为例：

新建一个css文件，代码：

@font-face {
	font-family:LetsgoDigitalRegular;
	src: url('../font/LetsgoDigitalRegular.ttf');
}

当然也可以定义标签支持的其他属性，如font-weight、font-style

创建HTML页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
    <!--引入定义的资源文件-->
	<link rel="stylesheet" href="css/font.css" /> 
	<style type="text/css">
       .span{
			font-family: LetsgoDigitalRegular;
			font-size: 100px;
		}
	</style>
	<body>
		<span class="span">456</span>
	</body>
</html>

效果：