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