欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

web字体和字体图标

程序员文章站 2024-02-16 23:18:28
...

开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好,甚至IE低版本浏览器也能支持。

1.字体格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。

  1. TureTpe(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

  1. OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;

  1. Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

  1. Embedded Open Type(.eot)格式

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;

  1. SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

2.字体图标

常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了

1、优点
  • 将所有图标打包成字体库,减少请求;
  • 具有矢量性,可保证清晰度;
  • 使用灵活,便于维护
2、生成字体图标文件
  1. 下载字体图标文件(可使用阿里巴巴矢量图标网),并把已经下载的字体或者字体图标文件引入到项目中

web字体和字体图标

  1. 自定义字体

/*定义字体图标*/
@font-face {
    font-family: 'wjs'; //自定义的字体名称
    src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/
    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}

  1. 通过css样式使用字体

/*自定义字体图标*/
.wjs_font_icon{
    font-family: wjs; //这里对应着自定义的字体名称
}
/*手机图标对应的编码*/
.wjs_font_icon_phone::before{
    content: "\e908"; //指定显示的内容
}

web字体和字体图标

web前端交流QQ群:327814892