CSS3 @font-face

@font-faceCSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定会有人问,这样的东西IE能支持吗?我告诉大家@font-face这个功能其实早在IE4就支持了,你肯定会感到惊讶。如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的。

语法规则

@font-face {
	   font-family: <YourWebFontName>;
	   src: <source> [<format>][,<source> [<format>]]*;
	   [font-weight: <weight>];
	   [font-style: <style>];
	 }

取值说明

  1. YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体(下载回来的叫什么字体,这里就填什么字体名),他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
  2. source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
  3. format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,svg等;
  4. weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
posted @ 2016-10-28 16:58  雪明瑶  阅读(155)  评论(0编辑  收藏  举报