而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：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,字体格式介绍及使用方法的更多相关文章

  1. 黄聪：如何为IIS增加svg和woff等字体格式的MIME

    现在字体图标已经渐渐代替了图片了,移动端用起来也很方便. 使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis的MIME-TYPE来支持图标字体文件 下面就把IIS增加sv ...

  2. web字体格式及几种在线格式转换工具介绍

    原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...

  3. 几种web字体格式

    目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...

  4. 工作笔记——web字体格式转换

    转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体 ...

  5. web字体格式转换

    @font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/ src: url('emotion.eot?#iefix' ...

  6. 自制按钮图标的两种方法： image sprite和svg字体文件

    用image sprite和svg字体文件这两种方法,都能够极大地减少小图形文件的数量, 从而减少服务器请求和带宽需求.提高网页的响应速度. 一.建立SVG字体文件 iconmoon 是一个在线工具, ...

  7. 字体格式类型(.eot/.otf/.woff/.svg)

    @font-face语句是css中的一个功能模块,用于实现网页字体多样性的模块(设计者可随意指定字体,不需要考虑浏览者电脑上是否安装). @font-face文件 而由于网页中使用的字体类型,也是各浏 ...

  8. RF1001: 各浏览器对 '@font-face' 规则支持的字体格式不同，IE 支持 EOT 字体，Firefox Safari Opera 支持 TrueType 等字体

    http://w3help.org/zh-cn/causes/RF1001 http://blog.csdn.net/agileclipse/article/details/12450949 http ...

  9. IIS无法加载字体文件(*.woff,*.svg)的解决办法

    在编写前端代码的过程中经常会遇到使用特定的字体(*.woff,*.svg),此时在加载字体时请求会被返回 Failed to load resource: the server responded w ...

随机推荐

  1. 数据库日常维护-CheckList_03有关数据库数据文件大小检查

    日常数据维护中容量规划是每个DBA的基础工作之一,也是非常重要的工作.在生产环境中一些比较重要的业务数据库会用前期容量规划不足,或出现意外的爆发式的数据增长,直至盛满整个磁盘空间,系统会无法使用,最终 ...

  2. SQL Tuning 基础概述07 - SQL Joins

    N多年之前,刚刚接触SQL的时候,就被多表查询中的各种内连接,外连接,左外连接,右外连接等各式各样的连接弄的晕头转向. 更坑的是书上看到的各种表连接还有两种不同的写法, 比如对于表A,表B的查询 1, ...

  3. u-boot的配置、编译及链接

    第一次写技术博客,还有些兴奋呢.我是CrazyCatJack,大家可以叫我CCJ或者疯猫.我即将成为一名嵌入式Linux的驱动工程师,现在还是一枚大四狗,呼呼~大学期间做了一些项目和比赛,都是基于32 ...

  4. Rafy 框架 - 使用 SqlTree 查询

    本文介绍如何使用 Rafy 框架中的 Sql Tree 查询: 除了开发者常用的 Linq 查询,Rafy 框架还提供了 Sql 语法树的方式来进行查询. 这种查询方式下,开发者不需要直接编写真正的 ...

  5. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  6. Bootstrap之选项卡

    <div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...

  7. animation-timing-function: steps() 详解

    在应用 CSS3 渐变/动画时,有个控制时间的属性 <animation-timing-function> .它的取值中除了常用到的 贝萨尔曲线以外,还有个让人比较困惑的 steps()  ...

  8. JavaScript中‘this’关键词的优雅解释

    本文转载自:众成翻译 译者:MinweiShen 链接:http://www.zcfy.cc/article/901 原文:https://rainsoft.io/gentle-explanation ...

  9. Parcelable序列化的使用，关于intent.getParcelableArrayExtra的使用

    Parcelable相较于Serializable的效率更高 public class ChargeMode implements Parcelable{ public String name; pu ...

  10. 细分java环境中的JDK、JVM、JRE

    细分java环境中的JDK.JVM.JRE 近来小看了下Android,扑面而来一堆概念JDK.JVM.JRE.SDK.NDK.ADT.缕了一下,其中JDK.JVM.JRE是java环境的东西,而SD ...