图标字体的使用-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

使用一个字体有三步：

1、下载字体，用工具将自己的图片转换成字体图标，例如采用下面的icomoon应用；

2、在CSS文档中声明字体名称；

3、引用声明了的字体；

字体下载地址有：

1、在icomoon中下载，同时还可以生成svg sprite 图片；

2、Iconfont-阿里巴巴矢量图标库下载；

3、在Font-Awesome中下载，不推荐使用了；

在以上的几个地址下载图标字体的方法有具体的案例，按照步骤操作即可。

1、申明方法 (为了兼容各个浏览器申明比较麻烦，但是字体图标连ie6都可以兼容的)

下载的字体文件

在CSS文件中声明

@font-face {
  font-family: 'icomoon';/* 这里自定义字体标题*/     
  src:  url('fonts/icomoon.eot?t52t4h'); /* IE9*/  
  src:  url('fonts/icomoon.eot?t52t4h#iefix') format('embedded-opentype'),/* IE6-IE8 */  
    url('fonts/icomoon.ttf?t52t4h') format('truetype'),/* chrome、firefox */  
    url('fonts/icomoon.woff?t52t4h') format('woff'), /*chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
    url('fonts/icomoon.svg?t52t4h#icomoon') format('svg'); /* iOS 4.1- */  
  font-weight: normal;
  font-style: normal;
}

2、引用字体

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;//这里可以使用多种字体，只要你先你申明了
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3、字体样式，指定单个图标的名称

.icon-home:before {
  content: "\e900";
}
.icon-cart:before {
  content: "\e93a";
}
.icon-user:before {
  content: "\e971";
}
.icon-menu:before {
  content: "\e9bd";
}

注：

@font-face功能

网页上展示最多的内容是什么？文字！纵然使用图片再多的网页，也不会丢掉文字符号。

@font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。

@font-face文件

而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT– Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
OpenType(.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
WOFF–WebOpen Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。
SVG(Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

@font-face文件转换生成

.eot、.woff、.svg每种格式的文件都可以用专门的工具转换得到，同时也有专门的用于生成@font-face文件的网站，可以将字体文件上传到网站上，转换后下载，然后就可以嵌入到网页上使用了。

中文@font-face

上面的这些@font-face转换网站都不支持中文字体的转换，中文字体文件相对于英文显得过于庞大，很长一段时间都被认为是不适合嵌入网页的。

直到几年前，这个问题终于被一个日本网站解决了，他用的技术就是截取法，在前端置入一个js脚本，脚本自动根据网页内容适时生成一个小字库（只包含当前网页内容的小字库）然后自动转换成.ttf、.eot、.woff、.svg等格式嵌入网页中，从页实现@font-face效果。体验和英文@font-face差不多，效果非常漂亮。但日文@font-face网站对于中文网页还无法支持。

转载于:https://my.oschina.net/u/1778998/blog/1358732