QQ 1640076782

2015年02月24日

如何在网页html中加入特殊字体?

Filed under: 英语网站设计 — 标签:, — limeng @ 1:50 上午

我们知道,中文站字体一般使用的是宋体和微软雅黑,英文站的是Arial,可是偶尔为了美观,我们需要使用一些特殊的字体,这样有些客户如果没有装该特殊字体,那么就会看不到该效果,那么我们如何在网页html中加入特殊字体呢?

1.做成图片插入网页中

如上图红色框部分

这种方法不适合在网页中使用过多,因为图片不利于优化,且图片太多对网站加载速度也会有一定的影响。

2.下载需使用的特殊字体

不同的字体格式,适应不同的浏览器

常见的   .TTF或.OTF,适用于Firefox 3.5、Safari、Opera

SVG,适用于Chrome、IPhone

.EOT,适用于Internet Explorer 4.0+

网上一般下载的字体都是.TTF格式,我们可以将其转换成自己需要的格式。

最后需要在css文件中声明该特殊字体

@font-face {
font-family: ‘bebas_neueregular’;
src:url(../fonts/BebasNeue-webfont.ttf) format(‘truetype’);
}

<div class=”top-box”>
<h2>Hot Product</h2>
<hr>
</div>
.top-box h2 {
color: #888888;
font-family: ‘bebas_neueregular’;
font-size: 3em;
margin-bottom: 20px;
text-align: center;
}