您的位置：首页 > Web前端 > CSS

利用CSS3 @font-face使用图标字体

2015-11-26 18:24 851 查看

CSS3可以通过

@font-face

使用自定义字体，这是让前端工程师拍手称赞的一件事情。在CSS3之前，前端页面的字体只能使用设备中已经安装好的字体。@font-face 可以让前端工程师随心所欲的使用各种字体，让我们的页面更丰富、更炫酷。

@font-face 不仅仅可以让我们的前端文字变得更加丰富，我们在前端页面中使用的很多图标也可以通过@font-face实现。下面这张图显示的是手机上面看到的web 版的百度地图，图中用红色方框圈出来的图标全部是用@font-face实现的自定义字体。是不是感觉很炫酷？而且下面会介绍到，这样使用@font-face实现的图标效果，代码也会非常的整洁、优雅。

讲到这里有必要说明一下自定义字体图标使用的字体格式。本文将会将会以一款免费开源的图标字体IconMoon为例。我们可以从IconMoon的官网生成想要的字体，并生成字体文件，然后把字体下载下来，得到下面四个文件。

.eot(Embedded Open Type格式)：IE专用字体格式。浏览器支持：IE4+。

.svg(SVG格式)：基于SVG字体渲染的格式。浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+。

.ttf(TrueType格式)：Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+。

.woff (Web Open Font格式): 针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时支持元数据包的分离。浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+.

使用字体图标的优势如下：

1. 矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源。

2. 轻量性：字体相对于一系列的图片资源要更加的轻量，一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

3. 灵活性：由于图标字体，本质上是一种字体而非一种图标，因此我们可以设置各种字体属性，例如通过设置font-weight, font-size, font-color来改变图标的粗细、大小、颜色。

4. 兼容性：网页字体支持所有现代浏览器，甚至连IE4都可以支持。

关于图标字体已经介绍的差不多了，该来点干货了。下面将介绍利用CSS3的@font-face使用图标字体的具体方法。我们这里继续以

IconMoon

为例来展示图标字体。下面是图标字体的页面代码。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?carbqp');
src: url('fonts/icomoon.eot?carbqp#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?carbqp') format('truetype'),
url('fonts/icomoon.woff?carbqp') format('woff'),
url('fonts/icomoon.svg?carbqp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" 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-google-plus:before {
content: "\ea85";
font-size: 60px;
}

.icon-youtube:before {
content: "\ea97";
color: rgb(210,0,0);
font-size: 60px;
}

.icon-facebook:before {
content: "\ea8a";
color: rgb(59,88,155);
font-size: 60px;
}

.icon-twitter:before {
content: "\ea8e";
color: rgb(26,178,232);
font-size: 60px;
}
</style>
<div class="icon-google-plus" style="float:left"></div>
<div class="icon-youtube" style="float:left;margin-left:50px;"></div>
<div class="icon-facebook" style="float:left;margin-left:50px;"></div>
<div class="icon-twitter" style="float:left;margin-left:50px;"></div>
</body>
</html>

最后呈现出的效果就是下面这样：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航