css 中引入第三方字体-CSDN博客

CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。

font-face属性介绍及其实例：

对浏览器的支持：

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

使用您需要的字体。

在新的 font-face 规则中，您必须首先定义字体的名称（比如 iconfont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (iconfont)：

<style> 
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1609663231597'); /* IE9 */
  src: url('iconfont.eot?t=1609663231597#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgAAsAAAAAQ') format('woff2'),
  url('iconfont.woff?t=1609663231597') format('woff'),
  url('iconfont.ttf?t=1609663231597') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1609663231597#iconfont') format('svg'); /* iOS 4.1- */
}


.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

url 表示服务器端提供的字体地址，这个也是可以使用多个，多个之间用逗号隔开，一般写多个是为了浏览器兼容加载不同格式的字体。目前web可以加载六种格式的字体：

eot ：全拼：Embedded_OpenType ，是由微软开发的字体格式规范，所以只适用于IE浏览器。

ttf ：全拼：TrueType ，是一种轮廓字体标准，最早是由苹果公司研发，后来成为 Mac OS 、 Microsoft Windows 系统中最常用的字体格式。

otf ：全拼：OpenType ，是可缩放计算机字体的格式，是由微软和Adobe公司联合开发。

woff ：全拼：Web Open Font Format web网络开放字体格式，他是专为网络设计的一种字体格式， WOFF 是把 OpenType 和 TrueType 字体进行了封装，并进行了压缩优化，它使用了广泛应用的 zlib 压缩，并添加了XML元数据，这种字体格式体积更小，适用于网络传输，可以使用户体验做到更好。

woff2 ：它是WOFF的升级版，它使用 Brotli 进行字节级压缩，比 WOFF 体积更小。

svg ：全拼：Scalable Vector Graphics 可缩放矢量图形，是一种基于可扩展标记语言（XML）的矢量图像格式，用于二维图形，并支持交互性和动画，字体中就是使用svg技术来呈现文字样式。

format 为可选值，表示给加载的外部字体指定字体格式，用来告诉浏览器让浏览器能够识别所使用的字体格式，可用的类型有 embedded-opentype , truetype , opentype , woff , woff2 , svg。分别对应上边我们介绍的字体格式。