401day（字体图标使用）

最新推荐文章于 2025-09-23 09:36:12 发布

原创最新推荐文章于 2025-09-23 09:36:12 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在HTML中使用@font-face声明加载并显示自定义字体图标，通过指定不同格式的字体文件路径，实现跨浏览器兼容性。同时，展示了如何设置字体样式，如颜色和大小。

《2018年11月9日》【连续401天】

标题：字体图标使用；
内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	@font-face { /*声明字体 引用字体*/
		font-family: "icomoon";
		src: url("icomoon/fonts/icomoo.eot?7kkyc2");
		src: url("icomoon/fonts/icomoon.eot?7kkyc2#iefix") format("embedded-opentype"),
		url("icomoon/fonts/icomoon.ttf?7kkyc2")format("truetype"),
		url(icomoon/fonts/icomoon.woff？7kkyc2)format("woff"),
		url(icomoon/fonts/icomoon.svg?7kkyc2#icomoon)format('svg');
		font-style: normal; /*倾斜字体正常*/
	}
	span {
		font-family: "icomoon";
		font-size: 100px;
		color: red;
	}
	</style>
</head>
<body>
	<span></span>
</body>
</html>