这种思路是在一个国外的网站上发现的,设计者在网站中使用了很多小图标,但是并没有使用CSS-Sprite技术,而是使用了另外一种特殊的办法。那就是css3的font-face
技术载入了一个自己做的字体文件,在需要显示的地方直接打上调用的字符。
这种办法只适用于大量纯色,至于数量貌似没有上限,a-z+0-9+符号就够用了,狠一点,插入中文,动辄几千个单位…
font-face图标 VS CSS-Sprite图标
他们同样是把N多个图标合并到一次HTTP请求中,CSS-Sprite是我们经常用的方法,它几乎可以把所有不需要平铺的图片全部放进去,然后来定位。
而CSS-Sprite的弊端就是定位,想朽木这样做前端的,几乎天天跟background-position
打交道,XY一个像素也不能差,虽说有这方面的工具,但是工作量还是放大了好几倍。
而font-face则不需要定位,只要对照着字体编辑器,就可以知道哪个字符对应的哪个图标。使用起来非常方便
<style type="text/css" media="screen"> <!-- i{font-family:'自定义字体名字';color:#000;} i:hover{color:#0f0;} --> </style> <div> <li><i>A</i>某某某</li> <li><i>B</i>某某某</li> <li><i>C</i>某某某</li> </div> |
A/B/C就会自动变成我们字体中所对应的图标,怎么样,很方便吧,但是font-face有局限性,就是必须是纯色图标,因为字体只能给它附加color
属性来改变颜色。
从维护方面来说,font-face方法要方便的多,更换/添加/图标非常容易,而CSS-Sprite则不太容易管理,特别是图片和大小都要变更的时候。
推荐一个图标字体库 Font Awesome
相关推荐
前端开源库-css-sprite-loaderCSS Sprite加载器,一个将png转换为sprite图像的Webpack加载器
Sketch-CSS-Sprite-Mixin, 在草图中,生成一个 CSS Sprite Mixin到剪贴板的代码 绘制 CSS Sprite MixinSketch中生成 scss,LESS 和手写笔的mixin的代码。 运行插件时,代码被复制到剪贴板。子画面名称是顶级图层名,...
主要介绍了css-sprite的使用详解,css-sprite是一个经常被用来合并前端图片的工具.需要的朋友可以参考下
前端开源库-css-spritecss sprite,css sprite生成器
前端开源库-gulp-img-css-sprite咕噜img css sprite,生成css sprite
grunt-css-sprite, 帮助前端工程师创建 css sprite的grunt插件 grunt-css-sprite生成高清设备雪碧图,使用 image-set//自动雪碧图sprite: { options: {//sprite背景图源文件夹,只有匹配此路径才会处理,
如果要在cli安装中使用css-sprite-mobile ,请执行以下操作: npm install css-sprite-mobile -g 命令行界面 Usage: css-sprite-mobile < out> < src> ... [options] out path of directory to write sprite file ...
该工具可以自动生成css sprite在应用background-position的参数
如果你想在你的 cli 安装中使用khf-css-sprite : npm install khf-css-sprite -g 选项 src:用于查找要放入精灵的源图像的数组或字符串字符串。 [必需的] out:将精灵文件写入 [process.cwd()] 的目录路径 base...
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js...
svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。 使用 svg-sprite 的好处 页面代码清爽 可使用 ID 随处重复调用 每个 ...
css精灵图生成软件,自动生成,并给出小图的backgrount-positon的值。比较好用
vue项目中引用svg-sprite-loader图标时,需要的icons和SvgIcon目录,因为这两个目录文件都是固定的,这里直接提供下载
pixel-sprite-generator, JavaScript程序sprite生成器 pixel-sprite-generator程序像素精灵发生器的JavaScript实现类似于视频游戏精灵的旧时代。 子画面是由组合方法生成的。实时示例...
PostCSS 精灵 插件,用于从背景图像创建精灵并替换它们。 . foo { /* Input example */}. foo { /* Output example */}用法 postcss ( [ require ( 'postcss-sprites' ) ] ) 有关您的环境的示例,请参阅文档。
css sprite示例源码
laravel-mix-svg-sprite 用于Laravel Mix的SVG精灵组件,包装了和。 安装 使用npm安装: $ npm install --save-dev laravel-mix-svg-sprite 用法 该组件向Mix添加了一个额外的API,以创建单独的SVG文件的SVG子画面...
node-spritesheet, 用于 node.js的Sprite图纸生成器和 grunt.js 任务 节点 spritesheet节点spritesheet是在 node.js 中创建sprite工作表的工具。 它最初的意图是作为一个 Grunt任务,但是我决定它值得进一步抽象。...
演示CSS中Sprite技术的应用,这是一种减少与服务器连接次数的好方法,能够适当提高服务器的响应能力,特别是高并发的网站。