如何在网页中嵌入任意字体

浏览数：39 / 时间：2015年06月09日

今天给大家介绍一种比较常用的在网页中嵌入任意字体的方法，此方法主要通过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>