web字体图标的使用

最新推荐文章于 2024-05-05 21:01:18 发布

何迟

最新推荐文章于 2024-05-05 21:01:18 发布

阅读量678

点赞数

分类专栏： CSS 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/83175817

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

方法：

1.在icomoon字库网站上下载完了字体之后，将压缩包解压

2.将压缩包中的font文件夹，拷贝到所需使用的样式表文件同路径下（下面引用的时候，没有加../到上级目录）

就是@font-face的url地址要注意，他的作用就是找到导入的font文件夹

3.将压缩包中的css文件内容部分拷贝到自己的样式表中（看源码）

4通过font-family:"icomoon"引用，打开压缩包的html文件将图标右下角矩形选中，ctrl+c复制在引用时粘贴

5.通过压缩包里面的json格式的文件，可以追加字体文件

文件的路径：

html格式文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?4mm4qn');
  src:  url('fonts/icomoon.eot?4mm4qn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?4mm4qn') format('truetype'),
    url('fonts/icomoon.woff?4mm4qn') format('woff'),
    url('fonts/icomoon.svg?4mm4qn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* 这里注意url地址前面没有加../这种到上级目录，如果引用不成功很可能是这里出错。*/
    
    span,em,i{
    	font-family: "icomoon";
    	font-size: 100px;
        font-style: normal;
        color: #CB2A0F; 
        /*有些浏览器可能上面字体倾斜样式不起作用，还是需要默认添加*/
    }
	</style>
    
</head>
<body>
	<span></span>
	<em></em>
	<i></i>
	<!-- 通过压缩包里面的html打开，对应的图形下面右边小矩形ctrl+c快捷键复制，这里粘贴 -->
</body>
</html>

效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web字体图标的使用

方法：1.在icomoon字库网站上下载完了字体之后，将压缩包解压2.将压缩包中的font文件夹，拷贝到所需使用的样式表文件同路径下（下面引用的时候，没有加../到上级目录）就是@font-face的url地址要注意，他的作用就是找到导入的font文件夹3.将压缩包中的css文件内容部分拷贝到自己的样式表中（看源码）4通过font-family:"icomoon"引用，打...
复制链接

扫一扫