如何生成eot字体

前一段时间听闻Google退出ubuntu字体的时候,使用了一下,从而了解到 font-face 的用法:

@font-face{font-family:'yahei';src:url(../images/msyh.eot);}

利用这种方式,就可以在网页上显示用户的系统中不存在的字体。对于保证我们设计的一致性,减少图片的使用是非常有帮助的。

那么如何才能生成对应字体的EOT文件呢?

查阅资料后,找到了三个方法:

1、在线字体转换:Font Squirrel

这个网站为我们提供了一个在线的字体转换服务,缺点是对于字体文件的大小有限制,更适合用来转换英文类的字体。

2、使用ttf2eot。

ttf2eot 是一个开源项目。支持Linux和Windows的环境,能够快速的生成EOT文件。使用起来也非常方便。

3、Microsoft WEFT。

Microsoft WEFT是微软推出的一款用来解决网页字体问题的软件。这款软件能够分析你的网页中调用了哪些字体(应当是通过css判断出来)然后会从系统中选择对应的字体进行转换,生成的EOT文件,也会根据页面中用到的字体情况进行缩减,所以生成的文件比较小。我认为非常适合用于中文类字体的生成。

具体的操作工程如下:

安装程序并运行后,点击Wizard,第一步是输入姓名和邮箱,完成后进入到网页选择的界面。这里是选择要用到特殊字体的页面。点击下一步后会弹出一个关于编码问题的对话框,一直点继续就可以了。

接着,WEFT会分析你的网页中用到了哪些字体。一般通用的字体,我们可以不选择嵌入,只对特定的字体进行转换。

之后,在选择生成文件保存的位置,就可以生成文件了。

将生成的文件拷贝到服务器的指定位置,在对应的页面中补充 font-face 样式,就可以实现在用户浏览器上显示特殊字体的目的。

参考资料: 1、用Microsoft WEFT工具制作EOT字库 2、网页字体终极解决方案 3、TTF2EOT 4、Font Squirrel 5、Microsoft WEFT 6、CSS嵌入任意字体

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CodingBlock

Android查缺补漏(View篇)--布局文件中的“@+id”和“@id”有什么区别?

Android布局文件中的“@+id”和“@id”有什么区别? +id表示为控件指定一个id(新增一个id),如: <cn.codingblock.view.c...

32480
来自专栏前端小叙

修改HTML5 input placeholder 颜色及修改失效的解决办法

input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中...

29080
来自专栏Jerry的SAP技术分享

SAP Fiori应用Footerbar区域按钮的高亮显示逻辑

如果您够细心,您或许会发现有的SAP Fiori应用的footerbar区域内的按钮有高亮显示,有的则没有。

19780
来自专栏jojo的技术小屋

原 二、在HTML中使用JavaScrip

作者:汪娇娇 时间:2017年11月4日 一、<script>标签 1、标签的位置 </body>之前 2、延迟脚本 defer 3、异步脚本 async 4、...

26860
来自专栏macOS 开发学习

Mac开发基础练习:制作一个状态栏(NSStatusBar)上的App(一)

20920
来自专栏web

vue-router基本使用

15920
来自专栏DeveWork

自定义WordPress 密码文章提示文字

WordPress 默认的密码提示文字是这样的:This post is password protected. To view it please enter...

40470
来自专栏小尘哥的专栏

使用bootstrap-Validator校验表单

前端UI框架选择bootstrap,那么bootstrap-Validator作为表单校验是一个不错的选择。

27130
来自专栏网络

web调试工具——Fiddler使用介绍(一)

一、Fiddler工具介绍 Fiddler是一款优秀的web调试工具,它可以记录所有的浏览器与服务器之间的通信信息(HTTP和HTTPS),并且允许你设置断点,...

27690
来自专栏deepcc

简单的滑动条

398130

扫码关注云+社区

领取腾讯云代金券