把图片变成字体，然后在引入到网页
首先是字体：如果把想要的字体引入到网页。
第一步：下载字体文件，一般下载到的是.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.
文章有用就分享与点赞，因为这是我的动力。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2015-08-20，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 交互设计前端开发与后端程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
腾讯云开发者
