自己动手制作图标字体

自己动手制作图标字体

前端与界面 2年前 (2015-07-13) 浏览: 147 评论: 2

位图和矢量图 世界上不是所有的事物都适合用审慎的眼光来看待,有的东西只可远观、不可近看。一张图片,放大放大再放大,不论是单反的拍摄的巨照,还是几十兆的数码相片,放大之后便如同大量马赛克一样,显露出图像的本质——点(也就是像素)。我们看到的丰富多彩的照片实际上就是由一个个点组会而成,存储图片只要描述出每一个像素点的颜色,将把像素汇聚一体,抽身远观之下,就是一幅绚丽的图片。 如上图所讲,我们会想到数学课本上举世公认的定理:面由点组成。这似乎也没什么错,但是今天我说面是由线组成的,你可能会觉得我只是玩一个文字游戏。其实我想讲的是,这两种表述其实代表两种计算机图片格式的思路——位图和矢量图。如果说“面是由点组成的”,我说的是“位图”;如果说“面是由线组成的”,我说的是矢量图。这两种表述在表面上没什么大区别,其实在表示图像上与很大的区别。 位图使用我们称为像素的一格一格的小点来描述图像.您的计算机屏幕其实就是一张包含大量像素点的网格.在位图中,上面我们看到的树叶图像将会由每一个网格中的像素点的位置和色彩值来决定.每一点的色彩是固定的,当我们在更高分辨率下观看图像时,每一个小点看上去就像是一个个马赛克色块。 矢量图使用线段和曲线描述图像,所以称为矢量,同时图形也包含了色彩和位置信息.下面例子中的树叶,就是利用大量的点连接成曲线来描述树叶的轮廓线.然后根据轮廓线,在图像内部填充一定的色彩。 图标字体 矢量图你之前也许闻所未闻,甚至直到看到这篇文章你才惊悉它的存在。实际上你一直就在矢量图的“此山中”,你所看见的计算机字体其实就是矢量图,证明的途径就是:你不管把word的字体调多大,它都是那么清晰,字的轮廓边缘还是那么圆滑平整。 使用wordpress让我有缘结识了图标字体,诚如你所见,王柏元的博客导航菜单上所用的图标就是图标字体,因为你会发现它和文字无异可以和文字一样改变颜色、设置大小还永远都是高保真。 wordpress上fontawesome用的极为广泛,国内也有阿里巴巴矢量图标库。图标字体的使用为网站开发省去许多美工的工作。初见图标字体你一定会惊叹它的神奇,进而你可能追本溯源想知道它究竟是怎么做出来的。 使用icomoon制作个性图标字体 当你设计出一个很美观的图形、头像,或者当你对自己的毛笔字很自信,同时你又对书法家字体用到枯燥乏味的时候——你想在网站中使用自己的图案或者甚至将PPT的通篇文字都设置你自己的毛笔字体。那么,使用icomoon制作个性图标字体就是不错的选择。 制作图标字体的第一步是制作矢量图 要制作矢量图,一个简便的方法就是将位图转换为矢量图。因为得到位图的方式很简单,你只需要用手机将你设计的图案或者毛笔书法作品拍摄下来就得到位图了。  

Android开发使用FontAwesome图标字体

Android开发使用FontAwesome图标字体

前端与界面 软件开发 3年前 (2015-06-11) 浏览: 203 评论: 0

英文原文参考:https://github.com/liltof/font-awsome-for-android 在前面一篇文章中我向大家介绍了在WEB前端中使用FontAwesome字体。 Font-Awesome 是为Bootstrap设计的一个图标集合字体,里面包含了300多个常用图标。使用Font-Awesome还具有如下优点: 1. 减少了图标的绘制工作 2. 可以设置图标的颜色和大小 3. 减少了图标的大小并且可以减少apk的大小,只需要一个图标字体文件即可,不需要各种尺寸的图标文件了,比如 HDPI、XHDPI等各种尺寸的图标。 Android开发使用FontAwesome图标字体 到Font-Awesome主页下载Font-Awesome字体(fontawesome-webfont.ttf)文件并放到项目的assets目录下,找到需要用的图标对应的字符串(font-awsome-for-android 包含了一份图标和字符串的对应文件,最新的对应关系在下载的Font-Awesome字体中的css目录中的font-awesome.css文件中查找),在TextView中设置需要使用的图标文字,然后设置TextView的字体为自定义的Font-Awesome字体。   xml布局文件代码   java代码 另外如果需要在使用Drawable的地方使用Font-Awesome图标,则可以自定义一个Drawable,然后在代码中使用该Drawable,详细使用方式请参考fonticon这个示例项目:https://github.com/shamanland/fonticon 另外除了Font-Awesome图标字体以外,还有其他的图标字体,例如 http://icomoon.io/

怎样为wordpress导航菜单设置图标

怎样为wordpress导航菜单设置图标

算法语言 3年前 (2015-01-28) 浏览: 1064 评论: 2

访问本站的朋友可以发现,笔者的导航菜单是带图标的,而wordpress导航菜单默认是没有图标的,下面是我的博客图示效果: 而且这些图标就像文字一样,可以改变它的颜色,可以美化我们的网页界面。在此,抛砖引玉出一个名词:Font Awesome Font Awesome介绍 Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。 Font Awesome 特性 一个字体文件, 369 个图标。 不需要JavaScript要求:更快的载入速度 无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。 自由免费:你可以将它应用到你的商业中。 CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。 完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中 为BootStrap而生:完全的兼容BootStrap新版3.0 桌面友好:你可以查看字体的样式列表 兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器 Font Awesome的使用 你只需要到:http://fontawesome.io 下载压缩包然后解压到你的项目中。 在你的HTML头部的head里面添加对相应的font-awesome的样式。   根据这里的案例开始你的项目。 如需兼容IE浏览器,可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。 怎样为wordpress目录设置图标 首先在header.php中引入,我是将上述文件放在主题目录下的,因此引入代码为   然后在wordpress后台-菜单编辑中设置某个菜单比如首页的导航标签属性为: 现在一般的主题都已经引用了Font Awesome,你不妨直接尝试最后一步,看是否能成功加载图标,这样能省去你的许多时间

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册