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

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

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

字体图标

使用现有的免费字体图标

有一个好用的 html5应用 。通过此应用你可以选择IcoMoon提供的免费或者购买收费图标,然后生成字体。如下图所示,

下载得到生成好的字体后,它会帮我们生成好css代码,如下,

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-rah7ee');
    src:url('fonts/icomoon.eot?#iefix-rah7ee') format('embedded-opentype'),
        url('fonts/icomoon.woff?-rah7ee') format('woff'),
        url('fonts/icomoon.ttf?-rah7ee') format('truetype'),
        url('fonts/icomoon.svg?-rah7ee#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

ok,事已至此,我们已经得到了需要的字体、css代码。现在我们可以在html页面使用图标字体来制作页面小icon了。

这里我们有两种方式来使用图标字体,一种是 html实体 + webfont ,一种是 css样式 + webfont

html实体+webfont

还记得文首提到的天猫首页中的小icon图标么?现在我再来看看它的源代码,

<li>
    <s class="menu-nav-icon fp-iconfont">&#x 3451;</s>
</li>
<li>
    <s class="menu-nav-icon fp-iconfont">&#x 3459;</s>
</li>
<li>
    <s class="menu-nav-icon fp-iconfont">&#x 346c;</s>
</li>
.fp-iconfont {
    font-family: tm-fp-font !important;
}

这里我们只截取了一部分html代码,并去除了多余的样式因素。

从上述的代码中,我们看到 s 标签中包括了一些十六进制字符(以 &#x 开始,我这里强制添加了一个空格,不然实体就被浏览器解析了),这些奇怪的字符的作用就是配合自定义font-family进行页面渲染,从而展现为一个个icon小图标。

回头看看我们之前从 https://icomoon.io/app 上下载自定义字体时,是不是也给每一个icon图标标识了一个 html实体 (e600、e601等等)?

css样式+webfont

我们除了使用html实体配合font之外,还可以使用css样式配合font。

https://icomoon.io/app 上下载自定义图标字体时,会同时得到相关的css代码,如下,

.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

所以我们只要在需要图标的html代码中添加相应的css样式即可,比如,

<li>
    <a href="#"><i class="icon icon-home3"></i>主页</a>
    <a href="#"><i class="icon icon-office"></i>归档</a>
</li>

可见,这种方式不再需要在html代码中书写相应的html实体,因为我们给相关元素添加了伪元素,将html实体转移到了伪元素中。

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

编辑:Beach

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