把图片变成字体，然后在引入到网页

首先是字体：如果把想要的字体引入到网页。

第一步：下载字体文件，一般下载到的是.TTF文件，只有一个文件。

第二步：把下载的字体，转换为其他格式，一般为了解决兼容性需要4-到5种文件格式，转换字体文件的程序比较多。比如这个网站http://www.freefontconverter.com/，都是免费转换一下。

第三步：把字体文件放在项目工程目录下，引入，

@font-face {
 font-family: 'a';/*这个地方设置字体的名称*/
 src: url('font2/cynicalhills-regular-webfont.eot');
 src: url('font2/cynicalhills-regular-webfont.eot?#iefix') format('embedded-opentype'), 
 url('font2/cynicalhills-regular-webfont.woff2') format('woff2'), 
 url('font2/cynicalhills-regular-webfont.woff') format('woff'), /*chome*/
 url('font2/cynicalhills-regular-webfont.ttf') format('truetype'),
 url('font2/cynicalhills-regular-webfont.svg#Cynical Hills') format('svg');
 font-weight: normal;
 font-style: normal;
 }
第四步：就可以用了
.contrast{
 font-size: 100px;
 font-family: 'a';
 color: blue;
 }

第二，如果把一个图标或者单色图片保存为字体，引入到网页。

第一步：需要把图标画出来，保存为svg格式的。比如AI这款软件就可以做到这一点。

第二步：把svg格式的图标，转换为字体文件，可以用网站https://icomoon.io/app/#/select/font也是免费的。

第三步：同样引入

@font-face {
 font-family: 'my_logo1';
 src:url('font4/my_logo.eot?-8akirl');
 src:url('font4/my_logo.eot?#iefix-8akirl') format('embedded-opentype'),
 url('font4/my_logo.ttf?-8akirl') format('truetype'),
 url('font4/my_logo.woff?-8akirl') format('woff'),
 url('font4/my_logo.svg?-8akirl#my_logo') format('svg');
 font-weight: normal;
 font-style: normal;
}

第四步就可以用了：可以像设置字体大小，颜色一样的设置时方法去设置图标的颜色与大小，

.myfont_test-01:before {
 content: "e600";
 font-size: 400px;
 background: yellowgreen;
 color: white;
}

备注：预览图为测试效果，显示的全都是字体，如果看了还不会，就可以问我，我的QQ是2565510046.

文章有用就分享与点赞，因为这是我的动力。