PHP World

首页 > Study > css3 › CSS3 @font-face 使用方法

CSS3 @font-face 使用方法

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!

如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。
首先我们一起来看看@font-face的语法规则:

@font-face {
    font-family: ;
    src:  [][, []]*;
    [font-weight: ];
    [font-style: 取值说明YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体(下载回来的叫什么字体,这里就填什么字体名),他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,svg等;weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。  你为什么在网上购眼镜呀?   @font-face{
  font-family: wangxizhi;
  src: url('wangxizhi.ttf')
  }
  @font-face{
  font-family: hongtou;
  src: url('hongtou.ttf')
  }  .wxz{
   font-family: wangxizhi;
   font-size: 50px;
  }
  .ht{
   font-family: hongtou;
   font-size: 50px;
  }
 " _ue_custom_node_="true"> 你为什么在网上购眼镜呀? 网上配镜有个大好处,你不知道! ? 省70%的钱呀!

css3fonts.png

上一篇:返回列表

下一篇:css3实现一个li设置多张背景图片及background-image属性

相关文章