Welcome, Old Sport!

教你如何在网页上加载font-face

by ilikecss ON 2012/09/28 5850

教你如何在网页上加载font-face

在前面的文章(教你使用Google网页字体)中已经教了大家如何使用Google的网页字体,今天我会教大家加载字体到网页上。CSS3中引入了@font-face功能,意为在CSS中可以Load所拥有的字体(本地或服务器已有字体),用法与之前Google字体相似,下面就一起来学习吧。

首先我们先选定字体,请大家自备,我这里提供3个网站。

将字体放到对应的文件夹/目录(服务器目录自定,Demo只是本地目录) 如图:

教你如何在网页上加载font-face 参考图片1

在CSS里设定好字体,如图:

教你如何在网页上加载font-face 参考图片2

由于下载的字体会有许多种样式,请将所有对应样式路径统一。样式请参考下面:

  • TTF – 支持大多数浏览器除了IE和iPhone
  • EOT – 只支持IE
  • SVG – 移动平台,iPhone/iPad
  • WOFF – 压缩版本
@font-face {font-family:"你的字体名字";src:url("你的字体名字.eot?") format("eot"),url("你的字体名字.woff") format("woff"),url("你的字体名字.ttf") format("truetype"),url("你的字体名字.svg#你的字体名字") format("svg");font-weight:normal;font-style:normal;}

以上完成后@font-face就算完成了,请大家对照Demo后自行实践一下。

10条评论
  1. #1

    teresa说道:

    啊。。。。。从经典看到你的文章,网站上看到你的介绍,,,,曾经我们在一个公司里,一个部门呢(moliyo)。。。。你是谁啊。。。。。 :smile:

    • 我晓得你是谁了,我记得你这个英文名字teresa,我是那个皮肤黑黑的。 :smile:

      • teresa说道:

        :smile: 我好像有印象,,,是不是你以前坐我旁边的。高高的,壮壮的。还有点小帅哦。嘿嘿。。。你好像还教过我inews标签滴  :roll:   对不?

  2. #2

    mr.johness说道:

    加入字体后 可以在DW里预览到自己的字体,但是浏览器调试的时候 没有显示? 是不是上传到空间才出现自己的字体?帮个忙解答下?

  3. #3

    mr.johness说道:

    顺便求个教程 简单点的最好是css可以完成(也不一定要纯CSS完成的):www.lg2.com/ 鼠标经过图片时 红色的遮罩动画 谢谢谢谢 :evil:
    可以发到以下mial:johness_lai@hotmail.com

  4. #4

    JENNY说道:

    太強了




TOP