ttf,eot,woff,svg,字体格式介绍及使用方法

Posted 心存善念

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ttf,eot,woff,svg,字体格式介绍及使用方法相关的知识,希望对你有一定的参考价值。

而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类:TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT – Embedded Open Type (.eot)

EOT是嵌入式字体,是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。

OpenType (.otf)

OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF – Web Open Font Format (.woff)

WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体。

谷歌的fonts_noto.css、fonts_Roboto.css加载太慢,虽然直接下载下来了使用,但丢弃了的原因是测试时没看出太多差别,哈

推荐一个tff转换woff等的工具: www.fontsquirrel.com/tools/webfont-generator


以上是关于ttf,eot,woff,svg,字体格式介绍及使用方法的主要内容,如果未能解决你的问题,请参考以下文章

为啥我们应该在字体中包含 ttf、eot、woff、svg、...

安全地允许通过 MIME TYPES / fil 上传网络字体(ttf、eot、svg、woff、otf)

将 Webfonts 转换为 ttf / otf 格式 - 有可能吗?

为IIS增加svg和woff等字体格式的MIME(20032008)

我应该使用带有字体的 webpack 吗?

凯尔特字体 - eot, woff, ttf - webfont