您的位置:首页 > 设计教程 > 网页设计 > 内页

网页字体字库自定义:WebFont与页面ICON图标调用说明

核心提示: 关于页面icon的制作,比较传统的方法是,让设计师去设计一个个的小图片,然后网页程式员再将设计好的icon放到页面上适当的位置。不过,随着这些年Web前端技术的迅猛发展,现在有一种新的方案去制作页面icon,那就是webfont。

当你打开(绝大部分)网站,页面上将会有许多形形色色的小图标(icon),适当的icon的可以达到一图胜千言的目的,使网页的表现效果更佳。

关于页面icon的制作,比较传统的方法是,让设计师去设计一个个的小图片,然后网页程式员再将设计好的icon放到页面上适当的位置。不过,随着这些年Web前端技术的迅猛发展,现在有一种新的方案去制作页面icon,那就是webfont。

本文将较为详细的介绍页面icon及webfont的方方面面。

页面icon

什么是页面icon

如下图所示,

天猫商城 中左侧的导航栏中,每一个购物频道都有一个小小的图标,这些小图标就是页面icon的一种表现方式。

除此之外,页面icon还有多种表现形式,可能出现在页面的任何位置。

传统icon的制作

我们再来看看 百度 域下的资源文件,其中有一个 图片文件 ,如下图,

从图中可以看出来,这个图片中有很多的小图标,这些小图标按照一定的顺序排列在一起。

上面这种方式就是我们所说的传统制作和使用icon的方法。

首先要求设计师设计好大小合适的小图标,然后将这些小图标按照一定的顺序和方式合并在一起(这种方式称为css sprite,或者图片精灵),然后网页程序员通过书写css代码来控制相应元素的 background-position 属性,以达到不同元素显示不同的小图标。

这种方式下,需要使用小图标的页面元素的css规则一般这样定制:一个表示图标类的 icon 样式,以及表达不同小图标的自定义类名,比如 icon-homeicon-user 。当然,具体css类名的命名规范是不定的。一般地, iconicon-* 的样式内容如下,

.icon {
    background-image: url(...)
}
.icon-home {
    background-position: 0 0;
}
.icon-user {
    background-position: 0 10px;
}

这种制作和使用icon的方式现在仍然有许多企业和网页正在使用,也是一种比较常规的方式。这种方式在书写css代码需要有一定的耐心,要匹配好各个icon的 background-position 属性。

值得一提的是,这种方式有一个不可避免弊端,就是,可能页面的icon需要两种以上的尺寸或者icon要发生变更。前者一般会要求设计师产出多套的icon,因为直接对图片进行缩放在网页上的表现并不是很好;后者可能就要重写之前的css代码了,因为可能图片雪碧后的position也发生了变化。

webfont与@font-face

什么是webfont

随着这些年Web前端技术的迅猛发展,web font技术逐渐成熟。那么什么是web font呢?

web font,又称之为 在线字体 或者 网络字体 ,是CSS3中的一个模块,主要是把自定义的特殊字体嵌入到网页中。无需安装,无需下载,直接在线使用。

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部