@font-face是CSS3中的一个模块，它可以把自己定义的Web字体嵌入到网页中。
其使用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导入自定义字体并使用</title> <style> @font-face { font-family: mainFont; src: url('font/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('font/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } p { font-family: mainFont; font-size: 30px; } </style> </head> <body> <p>大美女看这里</p> </body> </html>
说明：
font-family: <YourWebFontName> ：自定义字库名称。src ：设置字体的加载路径和格式，通过逗号分隔多个加载路径和格式srouce ：字体的加载路径，可以是绝对或相对URL。format ：字体的格式，主要用于浏览器识别，一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。src属性后还有一个 local(font name) 字段，表示从用户系统中加载字体，失败后才加载webfont。