css引入外部字体文件

 1、下载您想要的网站字体 100font.com - 免费字体下载 - 免费商用字体下载网站

2、如果下载的字体文件是TTF格式，不能在网站上直接使用，则需要转换成eot、svg、woff格式，这里提供一个网站字体转换网站，字体在线转换

3、css引入外部字体文件

@font-face{
	font-family:raleway-light;  /*为引入的字体文件起名，可以为任意名*/
	src:url('../font/raleway-light.woff'), /*引入字体*/
     /*引入不同格式的字体，每种浏览器对字体兼容性不一样，所以需要引入不同格式字体*/
	url('../font/raleway-light.otf')format('otf'),  
}
@font-face { //字体2
    font-family: 'InterRegular';
    src: url('font/Inter-UI-Regular.woff2') format('woff2'),
         url('font/Inter-UI-Regular.woff') format('woff');
}
body {
  font-family: 'raleway-light'; /*引入字体起的名字*/
  color:#222222;
  font-size: 16px;
}
div{
    font-family: 'InterRegular'; /*引入字体起的名字*/
}

注意：字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone