学习笔记——使用第三方字体

最新推荐文章于 2023-10-30 16:36:20 发布

一一GG

最新推荐文章于 2023-10-30 16:36:20 发布

阅读量917

点赞数

分类专栏：前端学习文章标签：前端 css

本文链接：https://blog.csdn.net/qq_41339126/article/details/123071765

版权

前端学习专栏收录该内容

107 篇文章 2 订阅

订阅专栏

在项目中使用第三方字体。

1.导入第三方字体到项目中

以ttf结尾的文件。

2.在CSS中注册并使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			@font-face {
				font-family: 'SourceHanSansCN';
				src: url('font/siyuan.ttf');
			}
			@font-face {
				font-family: 'YouSheBiaoTiHei';
				src: url('/font/YouSheBiaoTiHei.ttf');
			}
			@font-face {
				font-family: 'PANG';
				src: url('./font/pangMen.ttf');
			}
			.p2 {
				font-family: 'PANG';
			}
		</style>
	</head>
	<body>
		<p class="p1">这是默认字体</p>
		<p class="p2">这是引入的字体</p>
	</body>
</html>

3.效果

一一GG

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习笔记——使用第三方字体

在项目中使用第三方字体。1.导入第三方字体到项目中以ttf结尾的文件。2.在CSS中注册并使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wi.
复制链接

扫一扫