css如何引入特殊字体

css如何引入特殊字体

编码文章call10242025-06-25 12:55:054A+A-

在前端开发过程中难免会用到特殊字体,如何引入特殊字体?

  1. 首先你得有字体文件,文件格式为,TTF、OTF、EOT、SVG
  2. 将字体文件放入本地文件夹中或者服务器上
  3. css中引入,以下为引入方法
@font-face {
  font-family: 'icomoon'; // 这里自定义字体名称 
  src:  url('fonts/icomoon.eot?'); // 文件路径或者服务器路径
  src:  url('fonts/icomoon.eot?') format('embedded-opentype'), // format属性:字体的格式 主要用于浏览器识别
    url('fonts/icomoon.ttf?') format('truetype'),
    url('fonts/icomoon.woff?') format('woff'),
    url('fonts/icomoon.svg?') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 调用 */
body{
    font-family:'icomoon'
}

注:eot为IE专用,ttf官方说是苹果和微软为PostScript 而开发的字体格式,个人理解为通用格式。woff是压缩过后轻量级,svg对文本支持不太好

点击这里复制本文地址 以上内容由文彬编程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

文彬编程网 © All Rights Reserved.  蜀ICP备2024111239号-4