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

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

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

@font-face语法

web font技术需要通过CSS的 @font-face 语句引入在线字体。所以这里我先说一下@font-face的相关内容。

@font-css是CSS3中的一个模块,通过它可以将自定义的字体嵌入到前端网页中。随着@font-face的出现,标识着我们在web开发的过程中可以使用除了web安全字体之外的自定义字体,使页面的展现更加多样化。

值得一提的是,@font-face这个CSS3模块早在IE4中就已经被支持了。有点意外。

我们先来看看@font-face的语法,

@font-face {
    font-family: <your-webfont-name>;
    src: <source> <format> [, <source> <format>];
    [font-weight: <weight>;]
    [font-style: <style>;]
}

值得注意的有两点,一个是 font-family 属性,一个是 src 属性。前者是自定义webfont的名字,后者是引用字体的路径。其中 src<format> 字段是用来标识字体格式帮助浏览器识别。常见字体格式及format如下图,

format说明,

而浏览器对各字体格式的支持如下,

说了这么多的理论,下面让我们来一段具体的CSS代码,了解下这个@font-face到底是如何定义的。

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

这样我们自定义的web font就成功了。然后就可以在页面中正常使用了。比如,

div.title {
    font-family: 'icomoon'
}

如果不出任何的意外的话,你将会得到自定义的字体效果。

自定义字体

说到这里,如果大家自己动手实验一番的话,就会发现一个致命问题: 我去哪里获得这些自定义字体啊?

目前有三种途径来获取这些字体,

  • 去免费的网站下载字体
  • 去收费的网站购买字体使用授权
  • 有设计背景,自己设计字体

针对前两种方式没什么好说的,针对第三种方案,可能相关门槛就高了一点,需要一些设计背景。如果有兴趣,可以参阅 这篇文章

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

编辑:Beach

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