使用iconfont图标有何优缺点?

704 阅读1分钟

什么是 iconfont

顾名思义,IconFont 就是字体图标。严格地说,就是一种字体,但是,它们不包含字母或数字,而是包含符号和字形。您可以使用 CSS 设置样式,就像设置常规文本一样,这使得 IconFont 成为 Web 开发时图标的热门选择。

iconfont原理

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体,基本用法如下:

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}
  1. font-family:为载入的字体取名字。
  2. src:[url]加载字体,可以是相对路径,可以是绝对路径,也可以是网络地址。[format]定义的字体的格式,用来帮助浏览器识别。主要取值为:truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)。
  3. font-weight:定义加粗样式。
  4. font-style:定义字体样式。