说说网页开发中使用的那些字体图标 - 文章教程

说说网页开发中使用的那些字体图标

发布于 2017-10-08 字数 4731 浏览 2252 评论 0

字体图标的流行已经有些年头了,已经不是什么新鲜的概念了,只是因为 CSS3 新加入 @font-face 属性,他能让我们自定义网页中显示字体,而不局限于用户电脑安装的字体。

说说网页开发中使用的那些字体图标

传统的网页中的字体设置,使用 font-family 属性来定义,而且受限于浏览者电脑上所安装的字体,如果浏览者电脑上没有安装对应字体,那么网页渲染起来就会使用其他字体来代替。

而新增的 @font-face 改变了这一现状,使用该属性可以指定服务器上的一个字体,当浏览者访问的时候,会优先下载服务器上的字体,然后再使用该字体渲染网页。这样就可以发挥设计师的想象,灵活的任意应用字体,同时不需要考虑不同平台的差异。

兼容性考虑

既然是 CSS3 中新加入的属性,那么兼容性还有待确认,可以访问 http://caniuse.com/#feat=fontface,查看 @font-face 的兼容性情况。

@font-face 功能不仅仅可以用在改变文章的字体样式上,还可以来做字体图标。字体其实就是一种图标,把对应的基础的文字,渲染成有棱有角的文字。

如果某个文字的字体,并不设计成那个文字的变形,而设计成截然不同的图标,那么当网页中出现这个文字,就会渲染出一个图标。

字体图标与像素位图的对比

为什么我更偏向于使用字体图标,而不是使用传统的像素位图,下面给出了几点理由。

优点

  1. 兼容性:各个平台浏览器基本都可以使用,而且在某些老版本浏览器中,效果比图片更好。
  2. 轻量性:相对于同效果的位图相比,体积要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少 HTTP 请求,增强前端性能,还可以配合 HTML5 离线存储做性能优化。
  3. 灵活性:图标字体可以用过 font-size 属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。

劣势

  1. 图标字体只能被渲染成单色或者 CSS3 的渐变色。
  2. 免费开源的精美字体图标资源还是不够多。
  3. 创作自已的字体图标很费时间,重构人员后期维护的成本偏高。

常用字库文件格式

准确的说应该是常见的字体格式,使用不同的格式主要是为了兼容不同系统和不同的浏览器。

  • TTF(TrueTypeFont)格式:TTF 是 Apple 公司和 Microsoft 公司推出的字体文件格式,随着 Windows 的流行,已经变成最常用的一种字体文件表示方式。truetype字体的最大优点是可以很方便地把字体轮廓转换成曲线,可以对曲线进行填充,制成各种颜色和效果,字款丰富。
  • OTF(OpenType Font)格式:OpenType,是一种可缩放字型(scalable font),微软公司与 Adobe 公司联合开发,用来替代TrueType字型的新字型。
  • WOFF格式:Web 开放字体格式(Web Open Font Format,简称WOFF),是一种网页所采用的字体格式标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密。WOFF得到许多主要字体制造公司的支持。
  • EOT格式:EOT 是一种压缩字库,目的是解决在网页中嵌入特殊字体的难题。例如:网页前端开发人员在网页中使用了很多种特殊的精美的字体,当网友浏览时,却因没有安装相应的字库,只能看到默认的宋体字,效果惨不忍睹。利用 EOT 字库即可解决此难题。

如何制作图标字体

既然都谈了那么多的字体图标,那么如何制作我们自己的图标?这里推荐大家使用一款免费开源的字体编辑软件 FontForge,使用他能导出不同格式的字体,能满足我们大部分的需求。

FontForge制作图标步骤

  1. 首先我们需要设计好我们的图标,或者你可以到网上随便找一个免费的图标,然后去掉我们不需要的图标。
  2. 然后我们将每个图标都导出为 svg 格式的文件
  3. 将我们我们导出的 svg 图标,导入到 FontForge,此时我们可以在软件中修改这个图标的外观
  4. 修改好了以后,我们点击 文件->导出为字体 选择保存的格式,导出即可得到图标字体。

免费的字体图标资源

如果你不想自己制作图标字体,那么你可以使用别人免费开源的图标字体项目,下面列举了多个好看的开源免费的图标服务网站,你可以从中挑选你最中意的图标,然后使用到你的网站中。

  • Iconfont – 阿里巴巴矢量图标库
  • Font Awesome – 专为bootstrap设计的字体图标
  • iconExplorer
  • fontello – 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。
  • icomoon – 可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。
  • Glyphicon Halflings – 这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0