如何灵活利用免费开源图标字体_百度知道
如何灵活利用免费开源图标字体
提问者采纳
&&quot.#x0028;#x0025: normal.p {font-family.jpg" />css代码;#xe086;&gt.svg&#39;&&&#x0029;&amp浏览器显示图<img class="ikqb_img" src="IcoM&truetype&#39:#999;&amp:&&#x006f;) format(&#39;图形化字体编码&lt:&#39;&#x005d;#x0026.woff&#39;#x0037;#x0030;IcoMoon&#39://c.com/zhidao/wh%3D600%2C800/sign=2ae0feee4d/359b033b5bb5c9eacf894e43d039bc;#x0097;p style=&);font-&&#x0021;font-ie hack#x0035：&}html代码://c;&&#x0034.&IcoM&&woff&#39: url(&#39;&&#x;#xe083;p&#xe084：@font-face {font-family,url(&#39;&amp.#xe082.&};/p& &nbsp,url(&#39;&#xe085;#x0024;&/p&&lt
来自团队：
其他类似问题
为您推荐：
开源的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何灵活利用免费开源图标字体_百度知道
如何灵活利用免费开源图标字体
提问者采纳
);#x0035;&amp.ttf&#39;&#x006d;) format(&#39;&) format(&#39.IcoM&amp,url(&#39;);&amp,url(&#39:&#39;IcoM&amp.hiphotos.svg#IcoMoon&#39;p style=&#x0060;/p&gt.&#xe084;}html代码;#x0025;图形化字体编码&#x0087;&&#x0021;&svg&#39;&#x006f;&&amp.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src=");&#x0032;&amp.jpg" esrc="#x0034://b;#xe083.hiphotos:#x0036;;#x0097;IcoM&amp.): url(&#39;/p&&#x0033;font-style,url(&#39;&) format(&#39;#xe082.jpg" />css代码.com/zhidao/wh%3D450%2C600/sign=d50ad8fe93dda144da5c64b6af40ad162d9f2d38ef15802adec8af;p style=&& &#xe080;&#x0030;#x0031;#xe087;&amp：&IcoMoon&#39;&#x0026;#x0023：@font-face {font-#x0029;#xe086;&&&IcoMoon://b;&&/zhidao/pic/item/7af40ad162d9f2d38ef15802adec8af;&woff&#39: url(&#39:&#39;ie hack&&amp://b;p&&&#xe085;#xe07e;embedded-opentype&#39;#x0022;#x005d;) format(&#39;&&amp.eot&#39.com/zhidao/wh%3D600%2C800/sign=6bccdaceb47ecaa113bbe5/7af40ad162d9f2d38ef15802adec8af.woff&#39:#999;#x0024.&amp:font-};#xe081?#iefix&#39;#x0027;&/p&&#xe07f;truetype&#39;#x006e;IcoMoon&#39;&&&IcoM&#x0037;&#x0028;&):#999.p {font-family.baidu浏览器显示图<a href="http
资深电脑人
其他类似问题
为您推荐：
开源的相关知识
其他1条回答
百度，安卓可以下载，要用那一种各人喜欢。
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁换一换猜你喜欢3227人阅读
前端（56）
icon font 指的是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。
应用场景：
iconfont的优缺点
大小可以自由地变化
颜色可以自由地修改
添加阴影效果
*IE6也可以支持
支持一些CSS3对文字的效果
字体文件比图片文件小很多
由于是字体，所以只可以显示纯色图片，不支持多种颜色的图片（缺点）
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。
假如现在我们想使用 中的12星座图标：
选中12星座图标，下载到本地或者存储为在线项目
将以下选中的文件拷贝到项目文件目录下
在CSS文件中使用font-face声明字体，定义使用iconfont的样式
@font-face {font-family: "iconfont";
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
.icon-shuipingzuo:before { content: "\3437"; }
.icon-shuangyuzuo:before { content: "\3438"; }
.icon-mojiezuo:before { content: "\3439"; }
.icon-chunvzuo:before { content: "\343a"; }
.icon-shizizuo:before { content: "\343b"; }
.icon-juxiezuo:before { content: "\343c"; }
.icon-tianhezuo:before { content: "\343d"; }
.icon-sheshouzuo:before { content: "\343e"; }
.icon-tianchengzuo:before { content: "\343f"; }
.icon-shuangzizuo:before { content: "\3440"; }
.icon-jinniuzuo:before { content: "\3441"; }
.icon-muyangzuo:before { content: "\3442"; }
挑选相应图标并获取字体编码，应用于页面
class="icon iconfont"&&#x343d;&
关于@font-face这个属性，mozilla 的语法如下:
@font-face {
[font-family: &family-name&;]?
[src: [ &uri& [format(&string&#)]? | &font-face-name& ]#;]?
[unicode-range: &urange&#;]?
[font-variant: &font-variant&;]?
[font-feature-settings: normal|&feature-tag-value&#;]?
[font-stretch: &font-stretch&;]?
[font-weight: &weight&];
[font-style: &style&];
@font-face可以让我们自定义网页显示字体，引入字体资源文件，当用户电脑里没有安装这种字体时，依然可以正常显示。
font-family，指定一个字体类型作为默认字体类型，比如font-family:宋体默认字体就会是宋体.
src，这里有3个值，分别是url引入字体路径资源，本地路径或者网络路径都可以；font-face-name：自定义字体名称；formart：字体格式，因为浏览器的N国争锋，所以导致市面上有很多的字体格式，目前主要有ttf、woft、eot、svg、svgz这几种格式类型，对应的浏览器支持如下：
仅支持 Embedded OpenType(.eot) 格式。
除eot外，开始支持woff格式。重点内容
Firefox 3.5
支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6
支持 TrueType、OpenType(.ttf, .otf) 及 woff 格式。
Chrome,Safari,Opera
支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
unicode-range，字体编码的范围，比如8位，16位等。
font-variant，字体变形值
font-stretch，字体拉伸值
font-weight，字体粗线值
font-style，字体属性值
想进一步了解字体图标制作的朋友请移步
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：138021次
积分：2019
积分：2019
排名：第11123名
原创：56篇
转载：33篇
评论：28条
(1)(1)(3)(8)(2)(1)(1)(3)(5)(7)(3)(1)(2)(1)(1)(7)(4)(1)(3)(6)(1)(1)(3)(2)(1)(1)(7)(3)(12)}