专栏首页小狼的世界如何生成eot字体

如何生成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 条评论
登录 后参与评论

相关文章

  • CSS调用远程字体

    Demo 可以参考:http://idv3.sinaapp.com 中标题字体的用法,具体用法如下:

    大江小浪
  • Mac下使用Phonegap(Apache Cordorva)开发iOS应用

    Phonegap自从捐赠给Apache基金会后,改名字为Cordova了,文章发表时的稳定版本是 2.6.0 。

    大江小浪
  • Segoe Font 介绍

    作为微软的官方品牌字体,Segoe Font是一种非常优雅的字体,小到海报大到Logo,Segoe字体应用在微软品牌宣传的各种领域,

    大江小浪
  • AI助力下的中文之美

    当你看到这么多形态各异的字体,你是不是觉得这都是书法家的杰作呢?你是不是觉得,要想做这样一套字体一定需要很多的真人来做一个字一个字的字形设计呢?要在以前,这可能...

    刀刀老高
  • AI 字体世界地图:用 AI 和机器学习辨析各种字体的审美特征

    【新智元导读】著名设计机构 IDEO 项目负责人 Kevin Ho 受到李飞飞高徒 Andrej Karpathy 做的“图像地图”的启发,用机器学习算法通过...

    新智元
  • Markdown设置字体大小、颜色...,CSDN博客编写设置字体大小、颜色、粗细。字体,文字背景设置。

    小蓝枣
  • 字体的力量:将PPT设计做到极致

    总之,每一种字体都会体现出一定的设计理念。选用恰当的字体,会让整个页面看起来更加和谐,而字体使用不当,则会让页面看起来很奇怪。

    博文视点Broadview
  • 分享一些我常用的编程字体

    可能有的同学已经放假在家了,我也快了。最近不想聊具体的技术了,过年了聊点轻松的东西。但是又不想偏离编程太远,所以我今天聊聊我们常用的一些编程字体。在阅读代码的时...

    码农小胖哥
  • 撸了这么多代码,你真的了解字体吗?

    这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。

    WecTeam
  • 技巧 | 微信文章有那么多种字体?

    这两天我在 md-nice 用户群里看到有人在群里问怎么设置微信推文里的字体,恰好我前阵子刚好看过一篇关于微信推文字体排版的文章,

    灵魂画师牧码

扫码关注云+社区

领取腾讯云代金券