设计师做的高保真原型图,难免会用到艺术字体。

采用切片的方式,简单,粗暴,节省时间。除了retina屏其它兼容性也是一流。但是在修改的时候,会花很大的力气。即使只是修改文字大小,也需要重新切图,更别说修改文字,或者改变文字颜色了。

有没有想过,文字本来就应该是它原本的样子。只是看起来像,似乎不和情理。

之所以不直接使用艺术字体,最大的一个问题就是字体文件,一般都太大了。轻轻松松就上兆的节奏。在网页这种流量寸土寸金的地方,真的是很难应用起来。

我们在一个网页上一般用到的艺术字体的地方,往往只有banner和大标题。其实真的算下来也没有几个字。如果我们能把用到的字单独存在一起,组成一个字体文件,这不就解决了字体文件太大的问题了吗?

准备字体形状

  1. 将文字,分解成一个字一个图层。
  2. 选中所有图层,右键转换为形状。
  3. 选中所有图层,右键导出为…

导出svg图片

  1. 修改每一个图层的文件设置为svg。
  2. 导出

登录网站

  1. 登录https://icomoon.io, 选择右上角icoMoon App
  2. 或者直接登录https://icomoon.io/app/#/select

导入图片

  1. 点击import Icons导入所有svg文字
  2. 选中你要打包的文字
  3. 点击右下角Generate Font

修改文字

  1. 修改文字映射
  2. 点击download

导出代码

  1. 打开style.css文件
  2. 拷贝@font-face代码
  3. 拷贝fonts文件夹
  4. 修改相关路径,修改字体名称
  5. 只需要在使用的时候设定font-family为我们制定的字体名称就可以了

【27前端】字体图标 Font Face的更多相关文章

  1. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  2. 前端,字体图标,盒子显隐,2d形变,盒子阴影

    ---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...

  3. 字体图标Font Awesome 的使用

    下载地址:http://fontawesome.dashgame.com/ 将下载下来的压缩包解压,然后解压,将下载的整个文件夹复制到你的项目中,在你需要用字体图标的html中引入“font-awes ...

  4. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  5. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  6. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  7. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

  8. 字体图标 轻量级 Font Awesome

    今天呢,来推荐一款请轻量级 字体图标框架.Font Awesome 用法与bootstrap相似 打开网址.download下载,然后打开取到这两个,下载点这里,这个博客弄的挺好的. 找到exampl ...

  9. 前端学习_04_font-awesome字体图标

    使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...

随机推荐

  1. Unity 3D 连接Mysql数据库

    要想使用Unity直接连接数据库需要以下几个动态库

  2. HDU 2030 统计汉字

    BestCoder官方群:385386683 欢迎加入~ 寻人启事:2014级新生看过来! 汉字统计 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  3. js 写日期

    <SCRIPT language="JavaScript" type="text/JavaScript">   today = new Date() ...

  4. C# 单例模式(转)

    C#设计模式学习笔记-单例模式 最近在学设计模式,学到创建型模式的时候,碰到单例模式(或叫单件模式),现在整理一下笔记. 在<Design Patterns:Elements of Resuab ...

  5. Windows环境搭建Red5流媒体服务器指南(转)

    Windows环境搭建Red5流媒体服务器指南 Windows环境搭建Red5流媒体服务器指南 测试环境:Windows 7 一.   下载安装程序 red5-server 下载地址 https:// ...

  6. C++程序设计实践指导1.8求指定范围内的所有素数改写要求实现

    改写要求1:以指针为数据结构动态开辟存储空间 #include <cstdlib> #include <iostream> using namespace std; class ...

  7. 安装4.x版本的express开发框架

    错误版本(未更新前的安装方法,更新后就不是这么安装了,好多网上的教程还是这种方法,所以这里先写明了,旧版这里是可以通过的,但是新版4.x就不行了,请用分割线下边的方法)   本文演示在Linux上安装 ...

  8. Python信息采集器使用轻量级关系型数据库SQLite

    1,引言Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.SQLite作为后端数据库,可以搭配Python建网站,或者为python网络爬虫存储数据.SQLite还在其它 ...

  9. 正式学习React(一) 开始学习之前必读

    为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...

  10. 构建混合云:配置Azure site to site VPN连接(1)

      用户在构建自己云计算解决方案的时候,往往会选择私有云或者公有云来做部署,但在一些场景下,用户更加希望通过混合云的方案来满足自己的业务需求.Azure为混合云的部署提供多种不同的连接方案,最常见的是 ...