CSS3.0使用@font-face自定义字体
原创04月14日 19:03:09@font-face是CSS3.0里面的模块，能将自定义的字体添加到网页中。index.html文件
[html]view plaincopy<!doctypehtml> <html> <head> <title>css3.0@font-face</title> <metacharset="utf-8"/> <linkrel="stylesheet"href="index.css"> </head> <body> <h1>myblog</h1> </body> </html>
index.css文件 [html]view plaincopy@font-face{ font-family:'汉仪雪君体简'; src:url('./fonts/汉仪雪君体简.ttf')format('truetype')， url('./fonts/汉仪雪君体简.eot')format('embedded-opentype')， url('./fonts/汉仪雪君体简.woff')format('truetype'); font-weight:normal; font-style:normal; } h1{ font-family:"汉仪雪君体简"; } 如以上代码所示，@font-face的语法规则如下: [html]view plaincopy@font-face{ font-family:<YourWebFontName>; src:<source>[<format>][,<source>[<format>]]*; [font-weight:<weight>]; [font-style:<style>]; }
注：
1、YourWebFontName:此值为你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如font-family: '汉仪雪君体简';
2、source:此值指的是你自定义的字体的存放路径；
3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等。不同浏览器对字体格式的支持不同，一般来说至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
4、weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。
5.下载字体：/fonts
获取@font-face所需字体格式：/tools/webfont-generator
如果觉得《CSS3.0使用@font-face自定义字体》对你有帮助，请点赞、收藏，并留下你的观点哦！
