我们知道,中文站字体一般使用的是宋体和微软雅黑,英文站的是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>
<h2>Hot Product</h2>
<hr>
</div>
.top-box h2 {
color: #888888;
font-family: ‘bebas_neueregular’;
font-size: 3em;
margin-bottom: 20px;
text-align: center;
}