前几个星期,我把设计的打开君字母和好方字体做成了ttf格式。现在需要把它们在我的网站上显示,就像下面这样:
Lo-k!The quick brown fox jumps over the lazy dog.
Look!The quick brown fox jumps over the lazy dog.
要如何实现呢?
毫无疑问,这两个ttf并没有装在大家的电脑里,所以直接指定字体不能在大家的电脑上显示。利用CSS的@font-face属性可以在网页中嵌入任意字体。
首先在css(我的是style.css)所在的文件夹新建文件夹,命名fonts。在fonts上传字体文件(我的是hois.eot、hois.woff、hois.ttf和hois.svg)。
然后在style.css的最后加入如下代码
@font-face {
font-family: ‘hois’;
src: url(‘fonts/hois.eot’);
src: url(‘fonts/hois.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/hois.woff’) format(‘woff’),
url(‘fonts/hois.ttf’) format(‘truetype’),
url(‘fonts/hois.svg#Regular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
这样,网站就具备显示hois字体的能力了
在需要用此字体的时候就可以直接写属性了
如 css为 p { font-family:hois, sans-serif; }
文本编辑为 <span style=”font-size: 36pt; font-family: hois;”>Hi , I am Dakaijun !</p>
是不是很简单呢?
再来一个我看不太懂的
静态页面(完整的)为
<html xmlns=””>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>@font-face Demo</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” charset=”utf-8″ />
<style type=”text/css”>
body {
background-color:white;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
color:black;
font-size:12px;
}.demo
{
font-family:’hois’,Sans-Serif;
width:800px;
margin:10px auto;
text-align:left;
border:1px solid #666;
padding:10px;
}.hint
{
font-family:’hois’,Sans-Serif;
width:800px;
margin:10px auto;
text-align:left;
border:1px;
padding:10px;
}
</style>
</head>
<body>
<div class=”demo” style=”font-size:25px”>
The quick brown fox jumps over the lazy dog.
</div><br>
<br>
<div class=”hint”>
<a href=”dakaijun.cn”>dakaijun</a><br /><br />
</div>
</body>
</html>
感觉我很多东西都不知道,很想和你做个朋友。