如何用字体在网页中画icon

一。用css雪碧图

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

二。用font-html

三。用font-css

一。css雪碧图是通过背景图片的定位方式在确定图标的位置，最终实现效果的

二。

用字体画icon需要借助一个网站：https://icomoon.io/app/#/select

//font+html实现，此方法可以兼容IE低版本。

.sprite{
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li{
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}
.sprite li s{
margin:0 10px;
}
.sprite li:hover{
background-color: #fff;
border-color: #fff
}
.sprite li:hover a{
color: #b51600;
}

@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.imooc-icon{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size:20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/fontHTML.css"/>
<title>字体图标icon</title>
</head>
<body>
<ul class="sprite">
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好1</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好2</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好3</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好4</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好5</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好6</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好7</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好8</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好9</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好10</a>
</li>
<li>

<a href=""><s class="imooc-icon"></s>慕课网就是好11</a>
</li>
</ul>

</body>
</html>

//font+css画图标，此方法不支持IE8以下版本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/fontCSS.css"/>
<title>font-css</title>
</head>

<body>
<ul class="sprite">
<li>

<a href=""><s class="imooc-icon icon-list"></s>慕课网就是好1</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好2</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好3</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好4</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好5</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好6</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好7</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好8</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好9</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好10</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好11</a>
</li>
</ul>

</body>
</html>

实在不知道如何解释，提醒各位可以上慕课网：http://www.imooc.com/video/5431上面听一下，会受益匪浅。

如何用字体在网页中画icon的更多相关文章

用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标实现方法: 首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置,给背景定位.background- ...
用字体在网页中画icon小图标
HTML结构: <i class="icons icon-ui"> 㐺 <i> <i class="icons icon-ui"& ...
在网页中制作icon图标
用字体在网页中画icon图标第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...
用Raphael在网页中画圆环进度条
原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆放就不太好看了.随着cs ...
如何用iframe在网页中插入另一个网页的一部分内容，做成页中页
<html><head></head><body><h1>这是一段引用的内容!!!</h1><div style=&quo ...
如何用JS判断网页中某个id的网页元素是否存在
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <m ...
网页中导入特殊字体@font-face属性详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...
利用CSS的@font-face属性在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

php 判断字符串中是否包含另一个字符串 strpos
strpos (PHP 4, PHP 5, PHP 7) strpos — 查找字符串首次出现的位置说明 strpos ( string $haystack , $needle [, int $o ...
zblog忘记后台密码怎么办官方解决方案
刚装的zblog还没开始研究,结果发现密码弄错了进不去后台,也是醉了为节省时间,直接用官方方案,就是一个无密码进后台的文件.下载后把文件上传至网站根目录,然后直接访问后台修改密码 zblog密码找回 ...
excel如何显示多个独立窗口
https://blog.csdn.net/tigaobansongjiahuan8/article/details/76861084
Webpack 10分钟入门
可以说现在但凡开发Single page application,webpack是一个不可或缺的工具. WebPack可以看做是一个模块加工器,如上图所示.它做的事情是,接受一些输入,经过加工产生一些 ...
SAP ERP和C4C Account和Contact的双向同步
Account和Contact是C4C里唯一支持可以和ERP进行双向同步的主数据类别. C4C里创建一个Account:Mouser Electronics 在C4C里保存Account,自动同步到E ...
Xor Sum
6498: Xor Sum 时间限制: 1 Sec 内存限制: 128 MB提交: 27 解决: 13[提交][状态][讨论版][命题人:admin] 题目描述 You are given a p ...
Spring3中好用的工具类收集
1) 请求工具类 org.springframework.web.bind.ServletRequestUtils //取请求参数的整数值: public static Integer getIntP ...
C# 使用Epplus导出Excel [5]：样式
C# 使用Epplus导出Excel [1]:导出固定列数据 C# 使用Epplus导出Excel [2]:导出动态列数据 C# 使用Epplus导出Excel [3]:合并列连续相同数据 C# 使用 ...
【转】VxWorks信号量分析
Wind内核中有二进制信号量.计数信号量和互斥信号量三种类型,为了是运用程序具有可移植性,还提供了POSIX(可移植操作系统接口)信号量 .在VxWorks中,信号量是实现任务同步的主要手段,也是解决 ...
Tarjan算法详解+心得
Tarjan算法是由Robert Tarjan(罗伯特·塔扬,不知有几位大神读对过这个名字) 发明的求有向图中强连通分量的算法. 预备知识:有向图,强连通. 有向图:由有向边的构成的图.需要注意的是这 ...

如何用字体在网页中画icon

如何用字体在网页中画icon的更多相关文章

随机推荐

热门专题