CSS3--font-face使用

发表于   |   分类于   |  

1.介绍

  • @font-face是CSS3中的一个模块，主要是把自己定义的Web字体嵌入到你的网页中，不用担心兼容性，@font-face在IE4中都支持。
  • 如果是用字体做logo，英文的话字体和图片占用大小差不多，但是中文的字体包一般比较大，最好还是使用图片的形式。

为什么要将icon做成字体？

字体文件小，一般20-50kb； 容易编辑和维护，尺寸和颜色可以用css来控制； 透明完全兼容IE6；当然，Icon Font也是有缺点的，由于是字体，所以只支持图片上是纯色的，多种颜色的就不支持了。

各个浏览器对字体格式的支持是最大的区别：

webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体；
Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
Opera：支持.ttf、.otf、.svg。Opera 11开始支持WOFF； IE：只支持eot格式，IE9开始支持woff。

2.快速实践

  • 下载字体需要格式为.tff格式的字体文件
  • 搜索Webfont Generator，或者直接使用该网站提供的服务。这很简单，进入网站后选择.tff字体文件上传，勾选同意的复选框，点击Generate web font，点击Download Package下载，解压缩文件。
  • 使用
    新建index.css
1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
    font-family: 'Happy-Camper-Regular';
    src: url('../fonts2/Happy-Camper-Regular.eot');
    src: url('../fonts2/Happy-Camper-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts2/Happy-Camper-Regular.woff') format('woff'), url('../fonts2/Happy-Camper-Regular.ttf') format('truetype'), url('../fonts2/Happy-Camper-Regular.svg#SingleMaltaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2.demo {
	font-size: 100px;
   font-family: 'Happy-Camper-Regular'
}
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字体</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<h2 class="demo">hello world!You are my Destiny</h2>
</body>
</html>

3.字体icon

使用某些字体，如：WebSymbols-Regular百度云下载地址，Guifx字体，包括现在开源的比较流行的Font Awesome,使用方法同上。在html文件中如下示例：

1
2
3
4
5
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>F</span>

每一行显示的是其对应的图标

参考文献：

附在线icon font字体图标库：
http://www.weste.net/2013/12-13/94697.html
http://www.iconfont.cn/?spm=a313x.7781069.0.0.pICV51 阿里巴巴矢量图标
https://www.fontsquirrel.com/tools/webfont-generator
http://fontello.com/
https://icomoon.io/app/#/select
http://glyphicons.com/
http://fontawesome.io/

热评文章