wordpress 在网站上使用独有字体

前几个星期,我把设计的打开君字母和好方字体做成了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>

Smilie Vote is loading.
✿ 阅读数:4,964  分类:文章

wordpress 在网站上使用独有字体”下有一个评论:

发表评论

邮箱地址不会被公开。 必填项已用*标注

Captcha Code