Iconfont字体生成原理及使用技巧

Mrzhou
Mrzhou
Mrzhou
257
文章
1
评论
2020年5月9日11:18:26 评论 4,408

iconfont技术早就不是什么新技术了,我们iconfont.cn也已经做了快三年了。后来陆陆续续的来了很多新同学,可能只知道用这个,却不知道它内部的原理,这里给大家同步下,知道了原理可以更好的去使用。

Iconfont字体生成原理及使用技巧

首先前端都知道我们可以定义web上面文字的fontfamily。

css:
.test{
 font-size: 16px;
 font-family: '微软雅黑';
}
html:
<span class="test">iconfont字体原理</span>

但是这种情况下我们只能用系统默认的一些字体,限制比较大。比如微软雅黑就是windows下面才有。
其实css是可以自定义字体的,所以我们可以加载自己的字体。
使用 @font-face 定义一个字体family:

css:
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1453702746_9938898.eot');
  src: url('//at.alicdn.com/t/font_1453702746_9938898.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1453702746_9938898.woff') format('woff'),
  url('//at.alicdn.com/t/font_1453702746_9938898.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1453702746_9938898.svg#iconfont') format('svg');
}
.test{
 font-size: 16px;
 font-family: 'iconfont';
}
html:
<span class="test">iconfont字体原理</span>

这样我们就可以用自定义字体渲染这些文字了。 每一个字都有对应的unicode。比如我们在web上输入我跟输入我是一样的。浏览器会自动帮你找到对应的图形去渲染。

字体内部

我们来看下一个字体的样子。

我们可以通过一些软件打开字体,比如fontforge,fontlab。

比如下面的方正大草字体:

Iconfont字体生成原理及使用技巧

我们打开看下:

Iconfont字体生成原理及使用技巧

可以看到这个字对应的的图形就是我们在网页上看到的样子。另外注意左上角的unicode。是6211,也就是我们的另一种表现形式。

再双击可以看到我这个图形的样子:

Iconfont字体生成原理及使用技巧

其实就是一些路径。而这个路径可以用ai,ps,sketch等等来画,画完粘贴到这里。

iconfont1.0

所以我们就可以做一些事情了,我们可以去改造字体,把一个字对应的图形换成我们设计师设计的样子,处理好兼容性就成了我们iconfont的1.0。

当年iconfont1.0是怎样的流程呢:

Iconfont字体生成原理及使用技巧

由设计师手动修改ttf字体对应的图形,我们人工转换出另外四种字体。 这样前台就可以用unicode去引用,就是我们第一代的iconfont的原理。这个成本有点大。

iconfont2.0

其实我们注意到里面有个svg的字体。你用文本编辑器打开会发现他是xml格式的,每个字的图形对应了一个路径。这个路径就是我们svg里面的path对应的序列。

Iconfont字体生成原理及使用技巧

好了于是我们有了一个全新的思路,由设计师上传svg,我们存储下来,然后大家自由组合,由平台拼出对应的svg字体,然后再转换到不同的其他格式的字体。

继续阅读
Mrzhou
  • 本文由 发表于 2020年5月9日11:18:26
  • 转载请务必保留本文链接:https://zhouxiaosong.com/450.html
WordPress文件读写权限建议 网站建设

WordPress文件读写权限建议

WordPress的文件读写权限和所有权在WordPress网站的整体安全性中发挥着不可或缺的作用,所以我们需要尽可能确保进行合理的设置。在这篇文章中,我们将介绍有关WordPress文件读写权限的所...
WordPress数据库连接错误有效解决方案 网站建设

WordPress数据库连接错误有效解决方案

前段时间我另外一个WordPress博客莫名频繁出现“建立数据库连接时出错”之后各种找原因,终于完美得到解决,分享给大家希望有所帮助。   一、检查数据库连接信息 这个是最基础的,如果是博客...
禅道的目录结构 网站建设

禅道的目录结构

了解了zentaoPHP框架的基本原理和二次开发机制之后,您对禅道项目管理软件的目录结构应该也比较熟悉了。 一、顶级目录结构: bin目录是存放里禅道的一些命令行脚本; config下面存放了禅道运行...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: