目前,文字信息仍是网站最主要的内容,随着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可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

字体格式转换工具

EOTFast

这个工具我刚用过,非常好用的一个工具,用于把TTF文件转为EOT格式。

Microsoft WEFT

微软提供的字体格式转换工具。



Microsoft WEFT

ttf2eot

可以转换TTF文件为EOT格式。

ttf2eot Command Line Utility

另外推荐几个在线的转换工具:

  • http://ttf2eot.sebastiankippe.com
  • http://www.cuvou.com/wizards/ttf2eot.cgi
  • http://onlinefontconverter.com/

如果想把OTF文件转为TTF格式,可以使用FontForge来转换。

浏览器兼容性一览

  使用CSS3的@font-face属性可以实现在网页中嵌入任意字体,但是IE只支持微软自有的EOT格式字体,而其他浏览器都不支持这一字体格式,其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体,浏览器对@font-face属性及各种字体格式支持详的细情况如下:

Browser @font-face TrueType WOFF EOT SVG SVGZ
IE 4+ 9+ 9+ 4+    
火狐 3.5+ 3.5+ 3.6+      
谷歌 4+ 4+ 6+   4+ 6+
苹果 3.1+ 3.1+ 6+   3.1+ 3.1+
opera 10+ 10+ 11.1+   10+ 10+

在线字体转换网址:

https://www.fontke.com/tool/convfont/

https://www.web-font-generator.com/

(来源:梦想天空  原文:Web字体格式介绍及浏览器兼容性一览)

Web字体格式介绍及浏览器兼容性一览相关推荐

  1. font-face使用的web字体格式介绍、浏览器兼容和字体转换

    随着互联网的发展,越来越多以前不懂互联网的人也接触到了互联网.我们的客户对于互联网认知以及对于设计的要求是越来越高.设计师也是变成花样来满足客户的区中变态需求. 我们经常在项目中遇到各种非常个性化的字 ...

  2. 字体格式选择与浏览器兼容性分析

    Web字体是我们在使用网页时经常会用到的元素之一,它可以用于显示文本.标题.按钮等.在Web字体中,最常用的格式是CSS字体.CSS字体是一种用于定义Web字体的格式,它可以让Web设计师更加灵活地控 ...

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

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

  4. 关于WEB字体的介绍:verdana和georgia字体

    Georgia & Verdana 这2种字体的确是很多BLOG中常见的字体,以至于虚线的边框和Georgia都感觉是blogger的特征.其实很多blog系统的设计都遵循了W3C的CSS2 ...

  5. 超实用web前端开发工具推荐(web开发+前端性能优化+浏览器兼容性测试+……)

    要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...

  6. ttf、eot、otf、woff、svg字体格式介绍

    由于网页中使用的字体类型不一和各浏览器对字体类型有不同的支持规格,衍生了多种字体格式类型. 主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF 和S ...

  7. web测试必备技能:浏览器兼容性测试

    如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作. 同时,主流浏览器(IE,Firefox,Chrome,Opera,S ...

  8. html使用本地字体/自定义字体 字体转换成@font-face所需的web字体格式

    转载自 使用@font-face 转载自 字体转换网站的使用方法 转载自 字体转换网站官网

  9. web字体名称、格式、在线格式转换工具

    英文字体 google fonts Font-family:中文字体的英文名称 宋体:SimSuncss中中文字体(font-family)的英文名称 Mac OS的一些: 华文细黑:STHeiti  ...

最新文章

  1. ios tableview 滑动到底部
  2. CDN监控系统(一)
  3. html filter 作用,css滤镜有什么作用?
  4. Some cloud foundry deployment screenshot
  5. alpine linux 源码安装,关于docker:如何安装Go in alpine linux
  6. 基于zookeeper实现配置集中管理【转】
  7. 模板 · ISAP网络流+GAP优化+弧优化
  8. 设置占用GPU的比例
  9. 练习12——二叉树与表达式
  10. 功能三星Galaxy S2手机
  11. VDN平台各种数据库连接设置
  12. OA办公系统免费版评测 哪个适合自己?
  13. ks检验与s-w 检验_数据分析基础(2)——正态分布检验
  14. python绘制动态数字时钟_用 Python 画动态时钟
  15. 金仓数据库 KingbaseGIS使用手册(2. 简介)
  16. uva 509 RAID!(磁盘数据)
  17. 国内智能网联汽车信息安全政策汇总及思考
  18. Frequent Itemset Mining 频繁项集查找
  19. 如何卸载手机系统自带应用(无需root)?【亲测有用】
  20. 6天面试、斩获6家硅谷巨头Offer,我是如何做到的?

热门文章

  1. 区块链会计案例_会计中区块链的特征 区块链会计应用案例
  2. 广东侨乡台山人“小年夜”喜用传统沙琪玛祭灶
  3. python(pyqt5)多线程解决界面无响应
  4. 社会经济效益参考模板
  5. 不思议迷宫:逆向后的放置play
  6. Linq之GroupBy用法
  7. 神奇宝贝java_我的世界下载 1.25神奇宝贝整合包_单机游戏下载
  8. 机器学习K-均值——nonzero(clusterAssment[冒号,0].A==cent
  9. 西安80投影坐标系转WGS84地理坐标系如何求七参数
  10. Git merge时使用--no-ff参数