前言:
此刻各位老铁们对“css字体微软雅黑”大体比较关怀,同学们都想要分析一些“css字体微软雅黑”的相关文章。那么小编也在网摘上搜集了一些关于“css字体微软雅黑””的相关知识,希望看官们能喜欢,同学们一起来了解一下吧!原理篇
iconfont技术早就不是什么新技术了,我们iconfont.cn也已经做了快三年了。后来陆陆续续的来了很多新同学,可能只知道用这个,却不知道它内部的原理,这里给大家同步下,知道了原理可以更好的去使用。
css加载自定义字体
首先前端都知道我们可以定义web上面文字的fontfamily。
12345678910
css:.test{font-size: 16px;font-family: '微软雅黑';}html:<span class="test">iconfont字体原理</span>
但是这种情况下我们只能用系统默认的一些字体,限制比较大。比如微软雅黑就是windows下面才有。
其实css是可以自定义字体的,所以我们可以加载自己的字体。
使用 @font-face 定义一个字体family:
1234567891011121314151617181920
css:@font-face { font-family: 'iconfont';src: url('//at.alicdn.com/t/font_1453702746_9938898.eot'); /* IE9*/src: url('//at.alicdn.com/t/font_1453702746_9938898.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1453702746_9938898.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1453702746_9938898.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1453702746_9938898.svg#iconfont') format('svg'); /* iOS 4.1- */}.test{ font-size: 16px;font-family: 'iconfont';}html:<span class="test">iconfont字体原理</span>
这样我们就可以用自定义字体渲染这些文字了。
每一个字都有对应的unicode。比如我们在web上输入我跟输入我是一样的。浏览器会自动帮你找到对应的图形去渲染。
当然因为兼容性的问题,不同的浏览器需要加载不同格式的字体,所以我们要同时支持四种字体。
字体内部
我们来看下一个字体的样子。
我们可以通过一些软件打开字体,比如fontforge,fontlab。
比如下面的方正大草字体:
我们打开看下:
可以看到我这个字对应的的图形就是我们在网页上看到的样子。另外注意左上角的unicode。是6211,也就是我们的另一种表现形式。
再双击可以看到我这个图形的样子:
其实就是一些路径。而这个路径可以用ai,ps,sketch等等来画,画完粘贴到这里。
iconfont1.0
所以我们就可以做一些事情了,我们可以去改造字体,把一个字对应的图形换成我们设计师设计的样子,处理好兼容性就成了我们iconfont的1.0。
当年iconfont1.0是怎样的流程呢:
由设计师手动修改ttf字体对应的图形,我们人工转换出另外四种字体。
这样前台就可以用unicode去引用,就是我们第一代的iconfont的原理。这个成本有点大。
iconfont2.0
其实我们注意到里面有个svg的字体。你用文本编辑器打开会发现他是xml格式的,每个字的图形对应了一个路径。这个路径就是我们svg里面的path对应的序列。
好了于是我们有了一个全新的思路,由设计师上传svg,我们存储下来,然后大家自由组合,由平台拼出对应的svg字体,然后再转换到不同的其他格式的字体。
这里面的难点主要在,我们要分析svg。转换出对应的path序列。用户上传的svg格式太多,大小不一。要做各种转换,这里不展开了。
这就是我们的iconfont2.0,也就是目前线上跑的版本。
font-carrier
当然这一切都封装好了,做了一个工具库,font-carrier。
语法比较简单,可以直接往一个字体里面添加svg,也可以拿到某个字对应的svg,最终导出四种兼容字体。
知道了原理,以后大家调试就比较简单了,直接自己打开对应的svg字体,去看看你们对应的unicode的图形是不是有问题就行了,下面我们说说使用上一些常见的问题。
使用
下面就可能会遇到的一些问题,做些简单的解答。
字体冲突的问题
iconfont.cn平台给出的font-face定义默认都是 iconfont的fontfamily,建议大家改掉,避免与其他项目字体(比如引用的公共组件里面的字体)冲突。
unicode取值的问题
unicode其实没有特别的规定。
字体有几个私有平面:
很早以前我们使用的五位数的,结果现在chrome支持不太好,后面建议大家使用第一个平面里的。
这样用的好处是,字体没有加载的时候,显示的是一个框 口。而不是乱码。
字体基线的问题
这是个艰难的决定。一脸无辜.jpg
中文字体没有严格意义上的基线。我们参考了方正字体的基线:
中间的线是baseline,这个就是0这条线。对于一个字体来说,可以设置上边界(ascent)跟下边界(descent)。比如我们iconfont设置的是812,-212。
所以如果我们的图标这么设计:
那么是可以基本对齐的。
但是我们发现用户上传图标时喜欢撑满整个框:
可以想像下,这种图标跟字体一起展现,就会变得偏下了。
所以在支付宝的要求下,我们修改了基线。当我们把下偏移量设置的比较小,这样基线相对就会在比较下面的位置。 这样就算用户上传的图标撑满也没关系了,因为普通的汉子是差不多三分之一,我们迁就一下,偏少一点,这样基本就能对齐了。
于是带来了一群不明真相的群众的吐槽。但是又不得不做这个事情。
单个icon撑开的问题
有的时候设计师设计的icon会有多余的点,也可能当前上传的svg边界太大,于是导致我们的整个字体被撑开。
表现如下:
可以看到由于最左边的icon把字体撑开了。导致大家展示除了问题,表现在页面上是:
注意看里面的阴影,由于被撑开,导致它的边界是不对的。我们删掉这个图标再生成字体就好了。
当然这里还有各种问题,字体清晰度,icon上传svg规范问题,字体跨域问题,锯齿问题等等。这些平台基本都可以内部优化掉了,就不展开了。
结语
iconfont解决了我们以前大量使用图片带来的种种问题,但是也有自身的各种缺陷。比如不支持多色就是一个最大的致命伤,另外在不同浏览器下的表现不同,需要做各种兼容。
不久的将来iconfont应该会被svg symbol技术替换。可以参考这篇文章。
淘积木目前接入了webfont,直接用svg当作字体展现,实时预览,也是一种新的突破。
iconfont.cn平台目前也在做相关的改造,期待带来新一轮的字体使用方式变革。
标签: #css字体微软雅黑