css中@font-face的使用

1.font-face

font-face是css3中允许使用自定义字体的一个模块,它主要是把自己定义的web字体嵌入网页中

2.font-face的用法

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

font-family:为载入的字体取名字

src:[url]加载字体可以是相对路径,可以是绝对路径,也可以是网络地址

[format]定义字体的格式,用来帮助浏览器识别字体,主要有以下这些格式：[truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)]

font-weight:定义加粗样式

font-style:定义字体样式

3.常见写法

@font-face { 
    font-family: 'iconfont'; 
    src: url('iconfont.woff2?t=1657024856610') format('woff2'), 
    url('iconfont.woff?t=1657024856610') format('woff'), 
    url('iconfont.ttf?t=1657024856610') format('truetype'); 
}

4.font-face的使用

.icon{

    font-family:"iconfont ";

}