首先是字体：如果把想要的字体引入到网页。
第一步：下载字体文件，一般下载到的是.TTF文件，只有一个文件。
第二步：把下载的字体，转换为其他格式，一般为了解决兼容性需要4-到5种文件格式，转换字体文件的程序比较多。比如这个网站http://www.freefontconverter.com/，都是免费转换一下。
第三步：把字体文件放在项目工程目录下，引入，
代码语言：javascript复制@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也是免费的。
第三步：同样引入
代码语言：javascript复制@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;
}第四步就可以用了：可以像设置字体大小，颜色一样的设置时方法去设置图标的颜色与大小，
代码语言：javascript复制.myfont_test-01:before {
content: "e600";
font-size: 400px;
background: yellowgreen;
color: white;
}备注：预览图为测试效果，显示的全都是字体，如果看了还不会，就可以问我，我的QQ是2565510046.
文章有用就分享与点赞，因为这是我的动力。
