专注于快乐的事情

HTML&CSS

CSS3的@font-face和字体介绍

本文将介绍@font-face用法,以及用字体来代替图标的具体方法。 @font-face学习@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,@font-face的出现允许用户从网上下载字体并直接在电脑上自动完成安装,因此开发者不用担心某个字体在用户的电脑中是否存在的问题。 @font-face的语法规则@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如font-family:"YourWebFontName"; source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径; format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等; weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。 …