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

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

第一步:下载字体文件,一般下载到的是.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.

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

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2015-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏代码世界

表单提交中的input、button、submit的区别

1.input[type=submit] 我们直接来看例子: ? 代码如下: <form> <input name="name"> <input...

37910
来自专栏前端儿

让 select 的 option 标签支持事件监听(如复制操作)

想自定义option的样式,很多人会建议用 <ul> <li> 标签来辅助同步操作与值

9492
来自专栏漏斗社区

打个响指Selenium自动化开启

最近斗哥在朋友的影响下,接触了自动化测试工具中的一个项目:appium自动化测试脚本。

852
来自专栏阮一峰的网络日志

网页开发的6种在线调试环境

如今的网页代码,一般由三个部分组成:   * HTML,语义层,提供网页的内容。   * CSS,表现层,规定网页的外观。   * Javascript,...

3183
来自专栏一“技”之长

标签之美三——超链接的嵌入 原

通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

952
来自专栏做全栈攻城狮

游戏开发7天快速入门(3)-GUI图形用户界面及NGUI详解

其实想一下OnGUI方法是在每一帧重绘时进行调用。所以在每一帧的时候就会重新绘制文本框的内容。所以导致哪怕我们进行删除重新输入,则导致又被重新绘制了。所以这个时...

1043
来自专栏游戏杂谈

构建第一个Flex的Mobile APP

Flash Builder 4.5已经支持直接创建Flex Mobile Project,写一个最简单的例子

1002
来自专栏GuZhenYin

[EasyUI美化换肤]更换EasyUi图标

前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是...

5868
来自专栏无所事事者爱嘲笑

vue中的v-cloak

2059
来自专栏BestSDK

Mockplus教程:2钟搞定APP首页原型设计,3000个免费素材库

创建项目 ? 打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入...

3105

扫码关注云+社区

领取腾讯云代金券