转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换。

Web字体格式介绍

TrueType (.ttf)

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

EOT – Embedded Open Type (.eot)

嵌入字体格式(EOT)是微软开发的一种技术,允许
OpenType 字体嵌入到网页并可以下载至浏览器渲染,浏览器根据 CSS 中 @font-face 的定义,下载,渲染这种 .EOT
后缀的字体文件。这些文件只在当前页活动的状态下,临时安装在用户的系统中。

OpenType (.otf)

OpenType是一种可缩放字型(scalable

font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf,类型代码是OTTO,现行标准为OpenType
1.4。OpenType最初发表于1996年,并在2000年之后出现大量字体。它源于微软公司的TrueType
Open字型,TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed
font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。

WOFF – Web Open Font Format (.woff)

相对于
TrueType 和 OpenType ,WOFF(Web开发字体格式)是一种专门为了 Web
而设计的字体格式标准,它并不复杂,实际上只是对于 TrueType / OpenType
等字体格式的封装,并针对网络使用加以优化:每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输,并且不包含任何加密或者
DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来。

SVG (Scalable Vector Graphics) Fonts (.svg)

顾名思义,就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形(Scalable
Vector
Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致,使用简单的文本命令,SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

在线字体格式转换工具介绍

Online Font Converter

Free Font Conve

The FontSquir­rel
Con­verter

font-face
generator

Font 2 Web

ttf 2 eot

otf 2 woff

工作笔记——web字体格式转换的更多相关文章

  1. web字体格式转换

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

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

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

  3. 几种web字体格式

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

  4. Node.js 字体格式转换 ttf2eot ttf2woff ttf2svg

    前几天为了查找字体转换工具网上搜索,既然用 Node.js 来做的工具. https://github.com/fontello/ttf2eot https://github.com/fontello ...

  5. 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 ...

  6. 《工作笔记:移动web页面前端开发总结》

    工作笔记:移动web页面前端开发总结 移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (I ...

  7. 如何把你的图标转换成web字体

    在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...

  8. Web字体库下载及转换工具

    1.字体现在网站: http://ztxz.org/ 2.Web字体在线格式转换器: http://www.freefontconverter.com/ 3.

  9. 推荐一个web字体转换工具TTF转SVG

    推荐一个web字体转换工具:https://www.fontsquirrel.com/tools/webfont-generator

随机推荐

  1. Ribbon,主要提供客户侧的软件负载均衡算法。

    Ribbon Ribbon,主要提供客户侧的软件负载均衡算法.Ribbon客户端组件提供一系列完善的配置选项,比如连接超时.重试.重试算法等.Ribbon内置可插拔.可定制的负载均衡组件.下面是用到的 ...

  2. 一个线程可以拿到多个锁标记,一个对象最多只能将monitor给一个线程

    当用Synchronized修饰某个方法的时候,表示该方法都对当前对象加锁. 给方法加Synchronized和用Synchronized修饰对象的效果是一致的. 一个线程可以拿到多个锁标记,一个对象 ...

  3. 漫游Kafka实战篇之搭建Kafka运行环境(2)

    接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...

  4. C#中动态调用DLL动态链接库

    其中要使用两个未公开的Win32 API函数来存取控制台窗口,这就需要使用动态调用的方法,动态调用中使用的Windows API函数主要有三个,即:Loadlibrary,GetProcAddress ...

  5. a &a &a[0]之间的区别和联系

    数组中,a为数组的首地址,&a[0]为数组第一个元素的地址. 所以 a == &a[0] 但是,&a又是什么东西呢? 我们来做下面的代码测试: #include <std ...

  6. 开发环境eclipse for Mac 下的常用快捷键汇总(基本参照Win系,将Ctrl换为Command)

    最近迁移开发环境到Mac下,在豆瓣看到一个常用快捷键,去掉废话直接上干货 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + O ...

  7. input的disable和readonly

    在设计网页时,有时需要将输入框设置为只读状态,即其中的内容不可编辑,实现这种设计的方法有两种:使用input的disable和readonly两个属性. 先来看下二者的区别: <input ty ...

  8. 【BZOJ4443】[Scoi2015]小凸玩矩阵 二分+二分图最大匹配

    [BZOJ4443][Scoi2015]小凸玩矩阵 Description 小凸和小方是好朋友,小方给小凸一个N*M(N<=M)的矩阵A,要求小秃从其中选出N个数,其中任意两个数字不能在同一行或 ...

  9. style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

    style.currentStyle.getComputedStyle区别介绍   样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...

  10. java面向对象基础回顾

    (49)  (0) 面向对象 啥是面向对象 什么是多态多态的机制 接口和抽象类区别 个人理解 代码实现 面向对象 学习java大家接触到的最多的话语无非就是面向对象,可能大家没有仔细研究过这个问题,但 ...