查看: 203|回复: 0

[技巧资源] CSS3 @Font-face之图标字体(ICONFONT)应用

[复制链接]
蓝雨星辰 发表于 2018-2-28 23:54:57 | 显示全部楼层 |阅读模式
生活圈制作
本帖最后由 蓝雨星辰 于 2018-2-28 23:57 编辑

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,,能让自己的页面支持图标或自定义字体,不用担心只能用WEB安全字体了。

1.png

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化。

2.png

(IconFont图例)

为什么使用图标字体(IconFont)替代图片呢?

  • 屏幕适配,不会因不同屏幕手机而制作多种规格图片或处理;
  • 方便管理修改,灵活性极强,颜色、规格尺寸我们只需如同字体般设置即可;还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果;
  • 减少HTTP请求,降低服务器请求次数,加快服务器响应速度;
  • 支持所有现代浏览器,IE级别可以生成EOT字体格式兼容等。

当然了,其目前也具有一定的限制,仅支持但以色彩(纯色);同时呢,前期制作还是比较费时的。

其语法:

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

所需工具:CorelDraw(或AI)、FontCreator

同一站点图标风格基本统一的,制作的时候注意,或网上下载相应的WEB基本图标矢量图将其copy至FontCreator里进行编辑,编辑完毕之后将其导出TTF格式,为了处理兼容性问题,生成:EOT 、OTF、WOFF及SVG格式

应用时通过@font-face调用该字体名称,标签调用其CLASS及其字体映射值即可。


最近访问 头像模式 列表模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表