周刊3# Web字体图标专刊

周刊3# Web字体图标专刊

使用@font-face运用本地字体,制作一些特殊的字体效果非常方便,特别是使用@font-face制作图标,更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体,这样一来就有很多同学在问,如何制作自己需要的字体呢?或者说如何将自己需要的图标转换成自己需要字体,在运用到web页面中?本周特意推出Web字体图标专刊,帮助大家解决这方面的问题。

@font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上,不过这样一来很多人担心影响性能问题。这篇文章分享的主题就是使用@font-face配合一定的字体来制作Web页面中的Icon图标。
自定义Font Icon
Fontomas为大家提供的多种字体图标的文件,我们可以下载所需的字体,通过FontSquirrel或者OnlineFontconverter工具来帮助我们转换成所需的字体。文章一步一步介绍了如何使用FontSquirrel将Fontomas下载下来的字体转换成所需的字体文件,帮助大家自定义需要的Web Font Icons。
如何把你的图标转换成web字体
使用@font-face运用本地字体,制作一些特殊的字体效果非常方便,特别是使用@font-face制作图标,更是让我们省了很多事情。如何将自己需要的图标转换成自己需要字体,在运用到web页面中?这是很多同学关注的一个问题,文章主要介绍了,通过一些适量图的软件,绘制出矢量图标,然后通过一定的工具将这些图标转换成需要的字体。
为什么要用和如何使用字体图标
使用@font-face制作图标已不是什么秘密,也不是什么新技术,在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“,从教程中,你可以找到@font-face制作图标的优势与不足,同时也能找到要如何得到制作图标的字体。
如何制作自己的网页字体图标
网页字体图标到现在来说并不是一个新话题,大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标,但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外,其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中,就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。
Inline SVG vs Icon Fonts
当你为一个网站建一套图标系统的时候,你有几种选择。如果你知道图标需要是像素画图片的时候,你可能会用到css sprites也就是雪碧.而如果图标需要是矢量图的时候(现在已越来越普遍),你有两种选择,他们是ƒsvg和图标字体。
为什么抛弃Icon Fonts而选用SVG
Icon Fonts能解决图标缩放、颜色等问题,但Icon Fonts自身还是存在一定的问题。Thomas Fuchs在这篇文章中详细剖析了Icon Fonts和inline SVG的优略点,阐述了为什么要在Web开发中抛弃Icon Fonts而选用SVG。
图标字体化浅谈
在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化。这篇文章详细介绍了如何制作字体,并且如何运用到实际项目中,以及在制作使用中需要注意的细节。
Illustrator与IcoMoon制作Web Icon
Icons在Web设计中可以起到画龙点眼之作用,但当前时代使用图片Icon,在Web中起到的限制越来越多。以致于SVG、Web Font等方式来制作Icon,因为这些方法制作出来的Icon是矢量图标,可以随意放大缩小,修改颜色等。这篇文章中就介绍了如何使用Illustrator制作图软件和IconMoon应用,制作一套适合自己站点的Web Font Icon。
使用Grunt创建icon字体
大多数制作图标字体都是由SVG字体文件转换成其他格式字体文件,而这个转换过程都依赖于第三方工具来实现。在这篇文章中,作者向大家介绍了如何使用Grunt来转换字体文件格式。实现从人工转换到命令转换的一个过程。
如何制作自己的符号(symbols)字体
随着Retina屏幕的出现,这也意味着位图已无法完全满足业务的需求了。如果为了满足Retina屏显示需求,就需要增加位图尺寸,从而增加文件大小,这在移动端上是一笔不小的开销。解决这个问题,就是在项目中使用矢量图(SVG),因为他能在Retina屏下不让图标失真,而且文件也小。而大家常用的是字体图标,因为他得到很好的支持。不过在这篇文章中向大家介绍了如何制作自己的符号(Symbols)字体,用其制作Icon。
八步制作Icon文件
如何使用字体文件来制作Icon并不是难事了,但对于很多同学来说,如何将自己的矢量图变成SVG格式字体,并且将SVG格式字体转换成别的格式字体,然后制作出自己的图标,还是一件蛮困难的事情。在这篇文章中有一个制作字体文件的指南,只需要你跟着作者一步一步往下操作,你只需要经过八步就能顺利将自己的矢量图转换成图标字体,从而制作出一套完全属于自己的图标。
2014年20个优秀的字体图标资源
作者收集了2014年20个优秀的字体图标资源,包括了Font Awesome、Weather Icons、Mono Social Icons Font、Map Icons、Github Octicons、Open Iconic、IcoMoon、Marka、Ionicons、Socialicious、fontelico.font和Glyphicons等。可以是姓罗万象,涉及面之广。
返回顶部