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

时间:2022-12-26 12:41:39

原文地址: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

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

Free Font Conve

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

The FontSquir­rel Con­verter

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

font-face generator

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

 

Font 2 Web

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

ttf 2 eot

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

otf 2 woff

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

web字体格式及几种在线格式转换工具介绍的更多相关文章

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

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

  2. 从零开始学 Web 之 CSS3(六)动画animation,Web字体

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 制作web字体:CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...

  4. css3 web字体记

    css3 web字体 @font-face语法 @font-face能够加载服务器端的字体,让客户端浏览器显示客户端没有安装的字体. @font-face{ font-family:<YourW ...

  5. html5——web字体

    基本介绍 1.自定义网页特殊字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去. 2.支持程度比较好,甚至IE低版本浏览器也能支持. 3.web字体的大小鉴定是字 ...

  6. css 14-CSS3属性详解:Web字体

    14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...

  7. 几种web字体格式

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

  8. 笔记:字体大小的几种不同的格式px,em,rem

    px px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 譬如,Windows的用户所使用的分辨率一般是96像素/英寸. 而MAC的用户所使用的分辨 ...

  9. png、jpg、gif三种图片格式的区别

    png.jpg.gif三种图片格式的区别   2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...

随机推荐

  1. 红黑树&mdash&semi;&mdash&semi;算法导论&lpar;15&rpar;

    1. 什么是红黑树 (1) 简介     上一篇我们介绍了基本动态集合操作时间复杂度均为O(h)的二叉搜索树.但遗憾的是,只有当二叉搜索树高度较低时,这些集合操作才会较快:即当树的高度较高(甚至一种极 ...

  2. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  3. devexpress xtrareport 并列绑定两个数据源&comma;如何实现?

    如下图,要在xtrareport 并列绑定两个不同的数据源datatable1和datatable 2,并且table1中的只有10行数据,table2中有20行数据,如何实现

  4. Bootstrap&lowbar;表单&lowbar;表单控件状态

    一.焦点状态 焦点状态是通过伪类“:focus”来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form& ...

  5. Mysql zip 安装(windows)

    Mysql Windows zip包安装 Mysql 下载地址: http://dev.mysql.com/downloads/mysql/ 下载windows 版本对应的zip,之后解压 在C:\P ...

  6. &lbrack;C&num;&rsqb; 如何截取完整的网页图片

    前言 有时候浏览到非常有用的网页时,我们会选择将它加入到收藏夹中,但是网站一旦过期,以后就看不到这个网页了.当然也可以将网页打印成PDF文档保存.最新的Windows 10中的Edge浏览器支持将网页 ...

  7. 201521123067 《Java程序设计》第9周学习总结

    201521123067 <Java程序设计>第9周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 Q1.常用异常(题目5-1 ...

  8. Chapter 1 Securing Your Server and Network&lpar;12&rpar;&colon;保护链接服务器

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38438363,专题目录:http://blog.csdn.net/dba_huangzj ...

  9. CI持续集成系列之(九)代码发布脚本模板书写

    前言 前面我们介绍了Jenkins来发布项目通过nginx来展示流程,那里只是提供了一个简单的测试脚本,接下来呢介绍一下一个比较完善的发布脚本,该脚本可实现从gitlab服务器获取代码,打包,部署到W ...

  10. Mac安装6&period;1&period;2版本Elasticsearch及优化配置实践

    1,Mac上安装(指定java8) brew cask install java8 vim .base_profile 文件内容: JAVA_HOME=/Library/Java/JavaVirtua ...