码迷,mamicode.com
首页 > 其他好文 > 详细

字体图标的使用

时间:2020-02-19 19:16:34      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:and   位置   focus   国外   form   embed   for   岁月   font   

字体图标的使用

技术背景

很多情况下,我们都希望我们的图标可以缩放,而图片的放大和缩小都会失真,字体图标在这里被运用

字体图标的特点

可以做出跟图片一样可以做的事情,改变透明度、旋转度,等.. 但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小,但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备把字体图标大小的随意缩放特点运用的淋漓尽致...

网站使用流程

推荐个网站:http://icomoon.io 国外的,访问有点慢,但是做字体图标他们是专业的

技术图片

然后也是相同位置,点击下载,会下载一个压缩包到我们的本地,解压开来,准备融入项目

字体图标使用流程

一 、打开demo.html,复制字体图标数据到页面中

技术图片

 

 技术图片

当然你可以多复制几个,全部复制到页面中也行

二、也样式中声明字体,并给目标指定字体

<!--在在样式中,申明字体 -->
@font-face {
    font-family: ‘icomoon‘;
    src:  url(‘fonts/icomoon.eot?7kkyc2‘);
    src:  url(‘fonts/icomoon.eot?7kkyc2#iefix‘) format(‘embedded-opentype‘),
    url(‘fonts/icomoon.ttf?7kkyc2‘) format(‘truetype‘),
    url(‘fonts/icomoon.woff?7kkyc2‘) format(‘woff‘),
    url(‘fonts/icomoon.svg?7kkyc2#icomoon‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
}
?
<!-- 选择该字体 并为其给定大小和颜色-->
div {
  font-family: "icomoon";
  font-size: 50px;
  color: red;
}
<!-- 这就是那我们那复制而来的图标信息,有些ide会显示为空 -->
<body>
  <div> ? </div>
  <div> ? </div>
  <div> ? </div>
  <div> ? </div>
</body>

三、在网页中打开即可

字体图标可以想字体那样控制岁月控制,它不再想图片那样单调

技术图片

 

字体图标的使用

标签:and   位置   focus   国外   form   embed   for   岁月   font   

原文地址:https://www.cnblogs.com/chenchaoliang/p/12332356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!