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

点阵字体(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. mvc 生成输出url

    最近一直在学习mvc,其中对于 Url.Action生成的url感到很困惑.官方的解释的基于路由方案生成的url.问题是,怎样基于,怎样选择,没有过多的解释.网上找了很多资料,也看不懂,最后还是在pr ...

  2. mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案

    在连接字符串中  添加设置节点 ConnectionLifeTime(计量单位为 秒).超过设定的连接会话 会被杀死! Connection Lifetime, ConnectionLifeTime ...

  3. 几年前再用exjts4,如今extjs5发布了,技术更新快,每次给人惊喜

    我们非常高兴的宣布,Sencha Ext JS 5 beta版本开始进行公测了.这个beta版本可以让你.我们Sencha社区来对我们的Ext JS 5的工作进度进行评测.对于所以Ext JS开发人员 ...

  4. [转载]memcached stats 命令

    STAT pid 1552 STAT uptime 3792 STAT time 1262517674 STAT version 1.2.6 STAT pointer_size 32 STAT cur ...

  5. JFreeChart学习

    一.步骤: 创建数据集(准备数据) 根据数据集生成JFreeChart对象,并对其做相应的设置(标题,图例,x轴,Y轴,对象渲染等) 将JFreeChart对象输出到文件或者Servlet输出流等 二 ...

  6. js点击按钮,放大对应图片代码

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

  7. 远程连接mysql,mysql如何开启远程连接

    很多时候,mysql只需要开本地连接,也就是本机(服务器本身)连接就可以,默认也是这样,默认也不支持远程连接 但有的时候,我们需要将mysql独立出一台主机或数据库,放到另一台机器的时候,这时,就需要 ...

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

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

  9. Android TextView属性

    android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/phone/map/all)android:a ...

  10. [Angular 2] Transclusion in Angular 2

    Link: Blog Single transclude: <ng-content></ng-content> Multi-translcude: <ng-content ...