24Jul

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

时间: 2014-7-24 分类: 网页特效 作者: 鱼小委 2363 次浏览

TAGS: ,

今天给大家介绍一种比较常用的在网页中嵌入任意字体的方法,此方法主要通过css@font-face属性来实现。
本实例下fonts文件夹用来存放输出的字体,css文件夹用来存放css样式,以及用来输出演示的html页面index.html

先睹为快

demo-fonts 查看预览 下载附件

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

转换方法

demo-fonts-fontsquirrel

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>

查看预览 下载附件

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前有一条精彩评论

  1. 超級efly 发表于: 2014 年 7 月 31 日 08:45:14

    前來支持一下~~歡迎訪問AREFLY.COM~~ :mrgreen:

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部