「Font」使用字体 font字体怎么用

随着web和移动设备的兴起，信息的展示对字体的要求越来越高，对文件大小、兼容性都提出了更高的要求。

font-awesome为例：

文件大小：ttf>eot>otf>woff>woff2

优先级：eot>woff2>woff>ttf

兼容性：ttf>oft>woff2>woff>eot

考虑到兼容性，一般会加载多个格式的字体文件。

使用：

系统(windows)：下载.ttf/.otf文件，拷贝到C:\Windows\Fonts即可

web:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.test {
  font: normal normal normal 14px/1 FontAwesome;
}

注意不是所有字体都免费

部分免费字体下载：

https://web.vip.miui.com/page/info/mio/mio/detail?postId=33935854&app_version=dev.20051&ref=MIUI13

https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.31&puhui=1#!/webfont/index