iconfont 图标转为字体_iconfont 转换为图标字体
目的
为了解决 微信小程序中不能引用字体文件或者 cnblog 不能上传字体文件,将字体文件转为base64或者其他格式直接引入到css中!
操作步骤
第一步
打开网站 :https://transfonter.org/ 这是一个在线将ttf转换为base64 或者其他格式的工具
第二步
上传字体文件并选择 base64 encode,Formats选择WOFF及WOFF2
上图说明一下各大浏览器对 eot、svg、ttf、woff 几个文件格式的支持程度就知道为什么只选择WOFF:
pc端:
移动端:
第三步
下载转换后的文件,解压 .zip文件,打开 stylesheet.css,@font-face下的 src 就是转换后的base64流,欢快地复制到你的项目中使用吧!
拓展资料
TrueType字体(TTF)
TrueType一直是Mac OS和Windows操作系统上最常用的字体格式。格式允许最基本类型的数字版权管理 - 一个可嵌入的标志,指定作者是否允许将字体文件嵌入到PDF文件和网站等内容中。
所有主流浏览器都支持这种格式,但只有当嵌入位设置为可安装时,TTF字体才能在IE 9及更高版本中使用。
嵌入式开放式(EOT)
这种格式是由微软(@ font-face的原始创新者)在15年前创建的。这是IE8及以下使用@ font-face时唯一可识别的格式。
TrueType字体可以通过ttf2eot(开源实用程序),eotfast(仅限Windows)或Web嵌入字体工具(用于生成可嵌入Web字体的Microsoft实用程序)转换为EOT。
Web开放字体格式(WOFF / WOFF2)
由Mozilla与其他组织共同开发的WOFF字体创建在网络上使用,其加载速度通常比其他格式更快,因为它们使用OpenType(OTF)和TrueType(TTF)字体使用的压缩版本结构。它是在2009年开发的,现在是万维网联盟(W3C)建议书。此格式还可以包括字体文件中的元数据和许可证信息。这种格式似乎是赢家,所有浏览器都在这里。
所有主流浏览器都支持WOFF格式:
Firefox自3.6版以来
Google Chrome自6.0版以来
Internet Explorer 9
Opera自11.10版以来
Safari 5.1
自WebKit构建528以来其他基于WebKit的浏览器。
从TTF获取WOFF字体文件的最简单方法是使用sfnt2woff。
WOFF2是下一代WOFF。新的WOFF 2.0 Web字体压缩格式比WOFF 1.0提供了30%的平均增益(在某些情况下高达50%+)。
WOFF2浏览器支持:
谷歌Chrome 36
歌剧23
Firefox 35(默认禁用)
谷歌有特殊的工具来制作TTF的WOFF2字体。
可缩放矢量图形字体(SVG)
SVG字体是包含表示为标准SVG元素和属性的字形轮廓的文本文件,就好像它们是SVG图像中的单个矢量对象一样。但这也是SVG字体的最大缺点之一。虽然EOT,WOFF和PostScript风格的OpenType具有内置于字体格式的压缩,但SVG字体始终是未压缩的并且通常非常大。SVG字体的主要缺点是没有提供字体提示。
这种格式是Safari for iOS(iPhone,iPad)4.1及以下版本所允许的唯一格式。目前,Firefox,IE,IE Mobile和Opera Mini不支持SVG字体。
可以使用FontForge将TrueType字体转换为SVG。
TrueType Collection(TTC)
TrueType Collection(TTC)是TrueType格式的扩展,允许将多种字体组合到一个文件中,为具有许多共同字形的字体集合创造大量空间节省。它们首先在中文,日文和韩文版本的Windows中提供,并且支持Windows 2000及更高版本中的所有区域。
从Mac OS 8.5开始,Mac OS包括对TTC的支持。
iconfont 图标转为字体_iconfont 转换为图标字体相关推荐
- truetype字体怎么转换成普通字体_字体 – 如何将位图字体(.FON)转换为truetype字体(.TTF)?...
使用 FontForge Autotrace然后手动进行一些修正. 首先在Fontforge中集成Autotrace,请参阅Autotracing bitmaps in FontForge.这是我如何 ...
- 应用程序没有个图标怎么行? Qt图标美化及打包发布
大家好,我是程序员小哈. 我们编写了好几个Qt的程序了,每个程序都没有图标,看起来丑丑的. 而且我们编写好的程序,直接将exe拷给别人,在别人的电脑中,根本无法直接运行,辛辛苦苦编写的程序,别人用不了 ...
- iconfont 图标转为字体_iconfont字体图标的使用方法--超简单!
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...
- iconfont 图标转为字体_iconfont图标字体
一.iconfont的优缺点 优点 矢量性 屏幕适配(缩放) 字体性 样式控制(颜色,阴影,甚至浮雕) 文件小 一般20-50KB,比图片小很多,例如typicons库有308个icon,字体文件大小 ...
- iconfont 图标转为字体_iconfont字体图标的使用
一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源, ...
- iconfont 转换为图标字体。
iconfont 阿里巴巴矢量图库是个好东西呀~ http://www.iconfont.cn/ 巨大的图标库,可惜都是png的,不能随意用作字体图标. 这里讲一下,如何将iconfont转换为字体 ...
- iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法
我们在做网站时,网站里会有很多的小图标,通常这些小图标会使用小图片来制作,但修改起来比较麻烦.所以现在很多网站都使用字体图片来制作小图标. 今天学做网站论坛介绍一下阿里巴巴Iconfont矢量图转为字 ...
- iconfont 图标转为字体_App 中使用 Iconfont 的整套方案
作者:集美貌与才华于一身的 小芳 什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和我们使用自定义字体的方式是一样的,并且它是一种矢量图 ...
- iconfont 转换为图标字体
目的 为了解决 微信小程序 中不能引用字体文件或者 cnblog 不能上传字体文件,将字体文件转为base64或者其他格式直接引入到css中! 操作步骤 第一步 打开网站 :https://trans ...
最新文章
- lua类库 middleclass学习笔记
- gdi 格式转换 vb_VB 程序设计举例
- TSC的分歧导致Node.js分支
- 互联网金融,如何起死回生? | 周四话金融
- 仓库移动_移动式RFID仓库管理解决方案,智能仓库未来应用的会更广泛
- 数据结构--队列Queue--循环顺序队列
- pop3常用命令记录
- java 无开发环境时在记事本中编写的方法与命令行运行java代码
- Android 系统(272)---Android中的各种保活
- iPhone 12性能暴增!将再次与安卓拉开距离
- Vdbench工具文件系统测试记录
- 懒惰的牛(差分) + 金发姑娘和 N 头牛(差分) + 贝茜放慢脚步(二路排序)(归并排序)
- 全球医疗实力排名:各国差距有多大?
- 360全景图制作的原理是什么?有哪些必备的装备?
- Walle 瓦力 安装部署
- 什么是闭包?(前端面试题系列)
- 刘一男四六级词汇来源讲解
- 推荐五款好用的项目管理系统
- 理解GO语言make 和 new 的区别
- RuntimeException的特殊情况[C++] 有人会在程序中try catch吗?什么样的问题需要用try catch语句执行
热门文章
- 睡觉的时候让linux也不闲着
- Mysql 其他主机无法连接本地数据库
- C语言 - 递归之青蛙跳台阶详解(这货就是个斐波那契数列)
- 测试工程师面试攻略:教你如何描述项目经验
- 03.生成微博授权URL接口
- 【SA8295P 源码分析】40 - OpenWFD 显示屏配置文件 graphics_ADP_STAR.conf 、qcdisplaycfg_ADP_STAR_LA.xml 的解析流程
- 听一曲熊天平《相思无解》
- xp系统http服务器,关于windows xp系统下HTTP500内部服务器错误如何解决
- eclipse内部浏览器报错:此错误(HTTP 500 内部服务器错误)意味着您正在访问的网站出现了服务器问题,此问题阻止了该网页的显示
- php qqwry.dat_php读取操作IP地址数据库文件QQWry.dat