先大概介绍下计算机领域常见的字体类型与格式。

点阵字体(Bitmap Font)
点阵字体也叫位图字体,其中每个字形都以一组二维像素信息表示。这种文字显示方式于较早前的电脑系统(例如未有图形接口时的 DOS 操作系统)被普遍采用。由于位图的缘故,点阵字体很难进行缩放,特定的点阵字体只能清晰地显示在相应的字号下,否则文字只被强行放大而有损字形,产生成马赛克式的锯齿边缘。但对于字号 8-14px 的尺寸较小的汉字字体(即现今操作系统大多采用的默认字号)现今亦仍然被使用于荧幕显示上,能够提供更高的显示效果;不过现今该种点阵字体主要只作为“辅助”的部分,当用户设置的字体尺寸并没有拥有位图像时,字体便会以矢量图象方式显示;而当打印时,印有字体无论大小亦会使用矢量字体打印。
常见的纯点阵字体有 bdf,pcf,fnt,hbf 等格式。

描边/轮廓字体(Outline Font)
PostScript字体
PostScript字体由Adobe公司为专业数字排版开发。它使用PostScript,字形以3次贝兹曲线描述,因此一组字体可以通过简单的数学变形放大或缩小。但是事实上,很大或很小的字体需要额外的信息(hints)才能好看。其下又分为Type1, Type3,OCF, CID等类型。
TrueType字体
TrueType是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体类型标准。这种类型字体文件的扩展名是.ttf。windows和linux标准字体,mac平台上与postscript并存。
TrueType字体中的字符(或 字形)轮廓由直线和二次贝塞尔曲线(bézier)片段构成。这些构建在数学上比平面设计界PostScript使用的三次贝塞尔曲线(也被Type 1 字体所使用)更容易处理。尽管如此,对于多数形状,三次要比二次贝塞尔曲线需要更多的点来描述。这个差异也意味着它不能将 Type 1 无损地转换为TrueType格式,可是你可以无损地将TrueType转换为Type 1。
truetype字体的相关项目和技术
     * 文泉驿-linux中文字体项目
     * freetype-开源字体光栅化库
     * cleartype-微软和Monotype的技术人员使用TrueType的“提示技术”(hinting technology)来解决字体在低分辨率的显示模糊问题。原先的技术是在小字号时改用点阵字体。后来的技术改进首先引入了抗锯齿效果,可以平滑字体边缘;现在常用的是“次像素补偿”(微软使用这个技术,并称为ClearType),使用液晶显示器像素结构,以提高实际能显示的分辨率。 微软大力推广这些技术,并扩展到各种平台。

OpenType字体
OpenType字体是为了实现Windows和Macintosh系统兼容,而产生的一种新字体格式.它是一种可缩放字型(scalable font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf。它源于微软公司的TrueType Open字型,TrueType Open字型又源于TrueType字型。
OpenType的主要特征有:
     * 字体编码基于万国码(Unicode),可以支持任何文本,或者同时支持多种文本。
     * 一个OpenType字体可以带有最多65,536个字形。对于中文字库而言,最基本的字汇应该包含Big5的13,060个汉字或是GB2312-80标准的6763个常用字型,这些字应该能满足一般用户的使用,对于户籍管理、银行系统和出版社等用户而言需要2万多字甚至7万多字的支持。
     * 字体有高级字形特征,可以进行对复杂文本进行充分的字形处理,并能通过更简单的脚本施加更复杂的字形效果,比如用罗马字母脚本书写英文。
     * 字体文件可以拓展到跨平台,能够在Mac OS,Windows和一些Unix系统中进行设置。
     * 若不含异体字等拓展字形和拓展文字性能,OpenType CFF字体比Type 1要小
Apple Advanced Typography (AAT) 字体
苹果公司对truetype字体的扩展,支持国际化和针对排版印刷的复杂特性,相比opentype在字形选项上更加灵活富有表现力。

@font-face
@font-face规则允许链接字体到当前页面,在需要的时候自动下载并激活。这就使用户可以按照设计目标选择最匹配的字型而不受平台固有可用字体的限制。一个字体描述符号集合定义了字体的属性特征和字体资源来自本地或者外部。多重的 @font-face规则可以用来定义多种字体。通过css字体匹配规则,浏览器可以有选择的下载那些需要的字体。需要注意的是某些浏览器对@font-face引入的字体文件应用同源策略!

Syntax
@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}
 
浏览器支持情况
可以通过@font-face导入的字型文件主要有[.eot, .ttf, .otf, .woff, .svg]其中woff是W3C的推荐标准,eot是IE的特色。除IE外其它浏览器都可以很好的支持ttf和otf。微软提供了ttf2eot的转换软件Web Embedding Fonts Tool (WEFT),也有一些在线网站可以完成一种字型到其它各种字型的转换(http://www.fontsquirrel.com
 
使用场景
webfont尤其适用于一些单色icon的实现,相比图片展示易用性高,伸缩性强。亦可用做伸缩性背景图。
 
发布到网上的字型牵涉到版权问题,所以在使用webfont的时候如果有借用的字体图标请注意。
google有个专门的google fonts项目(https://developers.google.com/fonts/?hl=zh-CN)提供一些免费的在线webfonts可以使用,遗憾的是只有英文。

CSS3 @font-face (webfont)的更多相关文章

  1. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  2. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  3. css自定义字体完美解决方案example

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. qml demo分析(text-字体展示)

    上一篇文章分析了一个小游戏,使用qml编写界面+js进行复杂逻辑控制,算是一个比较完整的qml示例代码了,今天就不那么继续变态啦,来看一个简单的字体示例程序吧,该示例代码比较简单,主要是展示了几个简单 ...

  5. QML基本可视化元素--Text

    一个Text项目可以显示纯文本或者富文本 1.     可以使用Html标记:text: “<b>HELLO</b>” 2.     宽度和高度(width, height): ...

  6. QML学习(四)——<Text显示>

    文本显示是界面开发必不可少的内容,在Qt Quick模块中提供了 Text 项目来进行文本的显示,其中可以使用 font 属性组对文本字体进行设置.这一篇我们来看看它们的具体使用. 使用字体 就像前面 ...

  7. JavaScript常用类库推荐

    Axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [中文说明], [Github], [教程] Lodash 一致性.模块化.高性能的 Jav ...

  8. CSS3与页面布局学习总结(五)——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  9. CSS3魔法堂:认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  10. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

随机推荐

  1. 使用开源word操作组件DocX的记录

    1.DocX简介 1.1 简介 DocX是一个在不需要安装word的情况下对word进行操作的开源轻量级.net组件,是由爱尔兰的一个叫Cathal Coffey的博士生开发出来的.DocX使得操作w ...

  2. Protel 的自动推挤功能

    大家都在用PROTEL99SE...有时候要修改布好的线...一条条的去拆,这样很麻烦.其实PROTEL99SE是有推挤功能的...虽然不是很强...但是可以给大家带来方便.下面我就发个自己制作的教程 ...

  3. 获取SQL段的执行时间

    对SQL进行优化 经常会需要知道这条SQL语句执行的时间,这里介绍我的一种常用做法 DECLARE @d DATETIME SET @d=GETDATE() --do something --for ...

  4. linux下so动态库一些不为人知的秘密

    linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.    基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些 ...

  5. HDU_2058——等差数列,子集,集合长度判断

    Problem Description Given a sequence 1,2,3,......N, your job is to calculate all the possible sub-se ...

  6. linux系统下mySQL数据库 备份方法和脚本

    数据库备份1.创建个备份存储目录mkdir /root/backup/2.以下内容写到dbbackup.sh #!/bin/bash cd /data/db_backup/mysqldump -uad ...

  7. hdu 4605-Magic Ball Game(树状数组)

    题目大意: 给你一棵二叉树,每个节点有一个w值,现在有一颗小球,值为x,从根节点往下掉,如果w==x,那么它就会停止:如果w>x,那么它往左.右儿子的概率都是1.2:如果w<x,那么它往左 ...

  8. tomcat与resin的比较

    Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由于有了 ...

  9. Linux下Weblogic域的创建过程

    环境介绍:操作系统 :Redhat 5.5Weblogic :英文版 8.1.6 Weblogic安装目录 :/weblogic 一.域的建立执行下面语句进入weblogic的bin目录: cd /w ...

  10. UI Prototype Design IDE( 界面原型设计工具 )

    UI Prototype Design IDE( 界面原型设计工具 )   如何用工具去与客户进行交流,互动,定义要做的系统,什么什么的... 0.Balsamiq Mockups http://ww ...