053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

如何使用@font-face 自定义网页的字体

时间:2014-07-09


见惯网页常用的一些字体,感觉很平庸,如何使网页使用photoshop中的的漂亮字体,使用@font-face 可以实现自定义网页字体  下面说一下怎么使用

先介绍一下@font-face 语法规则

主流浏览器都能很好地支持@font-face,但对于嵌入的字体文件的识别,却是各有各的喜好。
 
所以在写@font-face语句之前,需要获取要使用字体的四种文件格式,确保能在主流浏览器中都能正常显示该字体。
 
 
.TTF或.OTF,适用于Firefox 、Safari、Opera
 
.EOT,适用于Internet Explorer 4.0+
 
.SVG,适用于Chrome、IPhone
 
.WOFF 知用于Chrome、Firefox
 
四种格式的文件准备好以后,就可以写@font-face语句了,格式如下:
 
@font-face 
 
{
 
  font-family: 'fontNameRegular';
 
  src: url('fontName.eot');
 
  src: local('fontName Regular'),
 
  local('fontName'),
 
  url('fontName.woff') format('woff'),
 
  url('fontName.ttf') format('truetype'),
 
  url('fontName.svg#fontName') format('svg');
 
}
 
在页面中需要的地方使用该字体:
 
p { font: 13px fontNameRegular, Arial, sans-serif; } 或
 
h1{font-family: fontNameRegular}
 

假如我们使用CenturyGothic字体  首选下载这个字体 


然后使用在线字体转换工具  生成字体包 

在线字体工具有:http://www.fontsquirrel.com/tools/webfont-generator
http://fontface.codeandmore.com/
http://www.web-font-generator.com/   这个本人测试不错

http://www.font-face-generator.com/


生成的字体包下载

然后将
@font-face {
font-family: 'CenturyGothic';
src: url('CenturyGothic.eot?') format('eot'), 
    url('CenturyGothic.woff') format('woff'), 
    url('CenturyGothic.ttf')  format('truetype'),
    url('CenturyGothic.svg#CenturyGothic') format('svg');
}

放到style里面


调用字体的方法:

font-family:CenturyGothic;


这样就可以了使用到这个字体了。

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP