如何在网页中嵌入任意字体
今天给大家介绍一种比较常用的在网页中嵌入任意字体的方法，此方法主要通过css的@font-face属性来实现。
本实例下fonts文件夹用来存放输出的字体，css文件夹用来存放css样式，以及用来输出演示的html页面index.html
先睹为快
1）获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone
一般我们在一些免费的字体网站上下载的字体大多都是.ttf的格式，我们可以将.ttf格式的字体文件转换成另外两种格式，这里推荐一个在线转换网站fontsquirrel.com，在线转换地址：http://www.fontsquirrel.com/tools/webfont-generator
转换方法
2）获取到三种文件格式的字体后，我们需要利用@font-face属性声明该字体
案例字体：
Planet Kosmos.ttf 点击下载字体 访问密码：7788
Bleeding Cowboys.ttf 点击下载字体 访问密码： 6052
Haunted Mouse.ttf 点击下载字体 访问密码：b2fb
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'MyWebFont';
src:url('webfont.eot');
src:url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
}
fnont-family:’MyWebFont’,MyWebFont为定义的字体系列，根据自己需要改动即可，另外需将上述代码中的webfont替换成自己的字体名。
本实例代码如下:
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'planet-webfont';
src:url('../fonts/planet/planet-webfont.eot');
src:url('../fonts/planet/planet-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/planet/planet-webfont.woff') format('woff'),
url('../fonts/planet/planet-webfont.ttf') format('truetype'),
url('../fonts/planet/planet-webfont.svg#planet-webfont') format('svg');
}
3）使用字体，首先在css中定义好字体属性，如下：
p { font-family: 'WebFont', Arial, sans-serif; }
在本实例中定义了3种，代码如下：
h1{ font-family: 'planet-webfont', Arial, sans-serif; }
h2{ font-family: 'Bleeding Cowboys-webfont', Arial, sans-serif; }
h3{ font-family: 'haunted mouse-webfont', Arial, sans-serif;
4）本实例还为h1、h2、h3、p四个标签定义了CSS
#h1css h1 {
margin: 0;
font-weight: 300;
font-size: 2.5em;
text-align:center;
padding:1.5em;}
#h2css h2 {
margin: 0;
font-weight: 300;
font-size: 2.5em;
text-align:center;
padding:1.5em;}
#h3css h3 {
margin: 0;
font-weight: 300;
font-size: 2.5em;
text-align:center;
padding:0.2em;}
.pcss p{text-align:center;color:#ffffff;}
p a{color:#ffffff;text-decoration:none;}
p a:hover{color:yellow;}
.hr1{
clear: both;
border-bottom:1px solid #efefef;
margin:40px 0;
5)在相关页面添加CSS样式链接
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
本实例代码：
<link rel="stylesheet" href="css/demo.css" type="text/css" charset="utf-8" />
6）最后我们来看一下调用字体样式页面index.html的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何在网页中嵌入任意字体</title>
</head>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<body>
<div id="h1css">
<h1>h1 style：RoboCop 2014</h1>
</div>
<div class="hr1"></div>
<div id="h2css">
<h2>h2 style：RoboCop 2014</h2>
</div>
<div class="hr1"></div>
<div id="h3css">
<h3>h3 style：RoboCop 2014</h3>
</div>
<div class="pcss">
<p>Make By:<a href="http://www.huangjianwei.com.cn" target="_blank">www.huangjianwei.com.cn</a></p>
</div>
</body>
</html>
