css如何自己制作图标字体以及其使用方法

我们在网页中经常看到很多图标，它并不是使用的图片，而是使用的字体，观察他们的css，大多类似

     .fi_menu:before{content:"\e9bd";}

这里使用的就是字体图标，我这篇文章就说说如何制作css使用的字体图标，至于如何使用，我另外单独写文章来介绍吧。

其实，也说不上自己制作，因为还是要借助其他工具或网站的，这里我分享一个方法，也是我一直以来使用的方法：

1.打开网址如下：

2.选中需要导出的图标后，点击上图中的“Generate Font”，点击之后效果如下：

3.直接点击上图中的"Download"就可以了。

4.解压之后，可以看到如下的目录结构：

5.打开demo.html：

6.这样就完成了css中图标字体的制作了。

当有了图标字体之后，我们就可以使用这些字体来点缀我们的网页了，在css3中如果想要使用自定义字体就要使用到"@font-face"属性。@font-face：使用服务端字体，不变形，可以避免因为客户端未安装某种字体导致的页面显示不如预期的问题；另外使用文字而非图片更利于seo（搜索引擎优化）。有很多的网站都是这种套路，比如我们熟悉的bootstrap框架：

上图中红色框住的就是使用图标就是字体文件的格式，而不是一个图片。

常见字体格式列表介绍：

字体文件介绍
字体格式	字体属性	备注
eot	embedded-opentype	ie
ttf	truetype
otf	opentype	可以看做ttf的升级版，强调打印效果时可使用，一般文字ttf就可以
svg		老的ios系统使用，淘汰
woff		web open type format

了解了这些基本知识之后，开始看看如何使用：

先看看最终效果：

1.解压从https://icomoon.io/app/#/select上下载下来的图标字体压缩包icomoon.zip，在fonts文件夹：

这些文件叫什么名字没有关系，比如我修改他们的名字，分别如下：

2.html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><p id="menu">菜单<i></i></p><p id="download">下载<i></i></p></body>
</html>

3.css代码：

<style type="text/css" >@font-face {font-family: 'zdw_font';src: url('myfonts/zdw_font.eot'); /* 写两个src：IE9 的兼容模式 */src: url('myfonts/zdw_font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('myfonts/zdw_font.woff') format('woff'), /* 主流浏览器 */url('myfonts/zdw_font.ttf')  format('truetype'), /* 主流浏览器 */url('myfonts/zdw_font.svg#zdw_font') format('svg'); /* Legacy iOS */     }i[class^="fi"]{font-family: 'zdw_font' !important;font-style: normal;}.fi_menu::before{content:"\e9bd";}.fi_download{color:red;}.fi_download::before{content:"\e9c7";}</style>

代码说明：

1.从我把字体文件修改了名字的行为可以看出，字体文件叫什么名字并没有什么影响，你只需要在css中引用正确就可以了。

2.@font-face属性的font-family用于定义你要使用的字体的名字，这里定义的名字在页面的其他部分可以通过这个名字来使用src的url里面引用的字体。我这里取得是"zdw_font",那么后边指定i[class^="fi"]的font-family的时候，也要使用"zdw_font",你可以随便取这个名字，但是要注意定义和引用要前后一致。

3.你可能会怀疑content里面的"\xxxx"是什么玩意？这里填什么内容，需要你到下载下来的iconmoon.zip解压后demo.html找到使用图标对应的xxxx,填入这里即可：

css如何自己制作图标字体以及其使用方法相关推荐

css与jquery、图标字体、常用数据
常用数据 *)按钮常用颜色:#008cBA/#169fe6;(字母大小写没有区别) css与jquery.图标字体. *)还能这样选择 header #search input[type=" ...
【CSS】阿里iconfont图标字体使用详解（一步一步图文示例）
1.新建一个文件夹 font-icon 2.打开网站,登陆后,选择[我的项目] 3.新建项目 4.添加图标到项目(购物车图标) 5.下载至本地,把download.zip解压后,把download下的 ...
Unity制作自定义字体的两种方法
Unity支持自定义图片字体(CustomFont),网上有很多教程,细节不尽相同,当概括起来基本就是两种方式.一是使用BMFont,导出图集和.fnt文件,再使用图集在Unity中设置得到字体.二是 ...
把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
30个免费网页图标字体以及使用方法
文章来源:http://sc.chinaz.com/info/130228237055.htm 设计达人版权: Free for personal or commercial projects 查看 ...
html字符图标在线工具,30个免费网页图标字体以及使用方法
30个免费网页图标字体以及使用方法 2月 28, 2013 评论 (1) Sponsor 在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移 ...
Chrome字体抗锯齿与图标字体显示异常处理
Preface Google Chrome在Linux平台上的字体使用的是自己设定的,而不喜欢用微软雅黑,但是不使用微软雅黑字体,会导致很多代码及其他页面很难看(早期的谷歌Chrome,印象中版本号4 ...
字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground
目录一.字体族二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式四.iconfont 五.行高六.字体的简写属性七.文本的水平和垂直对齐八.其他的文本样式九. ...
win10桌面图标字体看不清楚
win10桌面图标字体看不清楚方法:调整桌面图标显示效果 1.打开控制面板-系统和安全-系统 2.打开高级系统设置-高级-设置 3.勾选 "在桌面上为图标标签使用阴影" 或者选 ...

css如何自己制作图标字体以及其使用方法

css如何自己制作图标字体以及其使用方法相关推荐

最新文章

热门文章