如何生成eot字体

简介: 前一段时间听闻Google退出ubuntu字体的时候,使用了一下,从而了解到 font-face 的用法: @font-face{font-family:'yahei';src:url(../images/msyh.eot);} 利用这种方式,就可以在网页上显示用户的系统中不存在的字体。

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

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

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

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

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

1、在线字体转换:Font Squirrel

image

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

2、使用ttf2eot。

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

3、Microsoft WEFT。

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

具体的操作工程如下:

5aacef20d35a0638375fb64ef7d8fbff1.jpg

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

e111f05a838b3d09dac0b53523f91fbf1.jpg

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

76c8d37b30ed152f8c64e9fc00bd77881.jpg

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

d1b24effee66032fb6fdf7dd589718bb1.jpg

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

 

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

相关文章
|
8天前
|
区块链 Python
9-18|图片上生成字体设置字体大小
9-18|图片上生成字体设置字体大小
|
1月前
字体样式属性
字体样式属性。
29 0
|
5月前
|
安全
字体系列
字体系列。
47 1
|
Java
关于TrueType字体的gasp技术说明
关于TrueType字体的gasp技术说明
104 0
|
前端开发 开发者
字体 | 学习笔记
快速学习字体
145 0
字体 | 学习笔记
LaTeX:字体字号榜值对比
LaTeX 的字体大小设置有 `\small, \large` 等,与 Word 上的字号大小有对应
468 0
|
图形学
字体问题
字体问题
165 0
|
Python
在Maptlotlib中使用Helvetica字体
关注九天学者微信公众号(扫码关注)第一时间获取技术贴更新! 在学术论文中的图件(Scientific figures),优秀的图有四个特点:简单(Simple)、清晰(Clean)、易读(undisputedly easy to read)、美观。
1346 0
markdown编辑器(颜色、大小、字体)
我是黑体字 我是微软雅黑 我是楷体 呈现效果 我是黑体字我是微软雅黑我是楷体 浏览器默认值是 3 颜色值 参考:CSDN-markdown编辑器语法——字体、字号与颜色
1698 0