css自定义字体

一，下载字体包

1.有时在写页面的时候
ui
设计的图比较复杂，里面有很多字体在默认的字体类型是没有的，因此我们要下载相应的字体包

常见的有
.ttf
，
.woff
等

在这里插入图片描述

1.使用
@font-face
引入字体包

@font-face{
	font-family:led;// 自定义名称，无需引号
	src:url( '../../xxx' ) // 字体文件路径，支持本地文件，或字体文件链接地址
}

2.不同浏览器对字体的兼容性不同，可以在
src
后面使用
format
显式的指明引用的字体类型

@font-face{
	font-family:led;
	src:url( '../../xxx' ) format('truetype')

（1）
format('truetype')
：字体包为
.ttf
文件

【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

（2）
format('woff') | format('woff2')
：字体包为
.woff
，
.woff2
文件

【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

（3）
format('otf')
：字体包为
.otf
文件

IE专属字体

（4）
format('svg')
：字体包为
.svg
文件

【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

1.像默认方式一样，使用
font-family
属性就行

font-family: led //无需引号