移动Web开发字体格式选择

在做移动开发的时候,UI设计师会提供一些定制字体,来提高产品的视觉效果。对于前端开发来说,就需要考虑字体文件的兼容性和文件的大小,在尽量保证UI效果的情况下,兼容更多的浏览器,减少资源体积,使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制,最终字体包文件都会很大,这里不做讨论。下面主要介绍英文、数字符号场景下几种常见的字体格式。

.ttf
TrueType,是Type 1(Adobe公司开发)的竞品,由苹果公司和微软一起开发,是mac系统和window系统用的最广泛的字体,一般从网上下载的字体文件都是ttf格式,点击就能安装到系统上。

.otf
OpenType,TrueType是OpenType的前身,90年代微软寻求苹果的GX排版技术授权失败,被逼自创武功取名为TrueType Open,后来随着计算机的发展,排版技术上需要更加具有表现力的字体,Adobe和微软合作开发了一款新的字体糅合了Type 1和TrueType Open的底层技术,取名为OpenType。后来OpenType被ISO组织接受为标准,称之为Open Font Format(off)。

.eot
Embedded Open Type,主要用于早期版本的IE,微软根据OpenType做了压缩,重新取名为Embedded OpenType,是其专有格式,带有版权保护和压缩。ttf和otf字体在web端来说兼容相对较好,除IE和早期的ios safari和Android不怎么支持外,其他浏览器都兼容都不错。但是由于ttf和otf体积过大,在桌面浏览器的时代还可以满足需求,到了移动浏览器的时代,动辄5MB、10MB的字体文件就显得过于庞大了。因此微软在OpenType的基础上进行了优化压缩,相比OpenType大大减少了体积,但是除了IE以外的浏览器都不太支持,因此也没有成为行业标准。

.woff
Web Open Font Format,可以看作是ttf的再封装,加入了压缩和字体来源信息,通常比ttf小40%。在2010年4月8日,Mozilla基金会、Opera软件公司和微软提交WOFF之后,万维网联盟发表评论指,希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的(字体)格式”。2010年7月27日,万维网联盟将WOFF作为工作草案发布。也是当前web字体的主流格式。


woff字体文件浏览器兼容性(2019.07.23)

.woff2
Web Open Font Format 2.0,相比woff最大的优化应该是加强了字体的压缩比。相同字体内容下,woff2比woff要小20%到30%。


woff2字体文件浏览器兼容性(2019.07.23)

结论
对比总结我们就会发现,尽管 .woff 文件由于历史原因,许多旧设备的浏览器并不支持,但是考虑当前兼容情况和文件大小的优势,在进行移动Web开发时,我们可以优先考虑使用.woff2,如果需要兼容更多的低版本设备,再考虑使用.woff。
————————————————
版权声明:本文为CSDN博主「black-heart」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/mrqingyu/article/details/96995760

原文地址:https://www.cnblogs.com/sunbey/p/12148647.html

时间: 2024-10-11 17:52:34

移动Web开发字体格式选择的相关文章

web开发字体设置

em:父元素的font-size为相对单位: rem:html的font-size为相对单位: 为了解决rem在进行单位换算上的麻烦问题,给大家介绍个使用rem的小方法,设置html字体大小为font-size:62.5%;然后使用rem的时候就更好用了,比如1.2rem=12px,1.4rem=14px,1.6rem=16px. 单行文本溢出隐藏: 1.定义文本父元素框的宽度,width: 2.超出隐藏 overflow:hidden: 3.强制文本在一行显示white-space:nowra

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

原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换. Web字体格式介绍 TrueType (.ttf) Windows和Mac系统最常用的字体格

ttf,eot,woff,svg,字体格式介绍及使用方法

而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格. 字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG. TrueType Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性.同时,这类字体和矢量字体一样可以随意缩放.旋转而不必担心会出现锯齿. EOT – Embedded Ope

Web开发人员常犯的10个错误

说到开发一个运行在现代网络中的网站:Web开发人员需要选择虚拟主机平台和底层数据存储,准备编写HTML.CSS和JavaScript用的工具,要有设计执行方式,以及一些可用的JavaScript库/框架.在将任务分解为这几步之后,接下来要做的就简单多了,可以去网上找文章,浏览论坛,看看那些能提供更好的Web体验提示的示例. 然而不管是走哪条路,犯错却是每一个开发人员都不可避免的.虽然有些错误与某一个具体的行为相关,但有些错误却是所有Web开发人员都需要面对的挑战.因此,通过研究,体验和观察,我总

为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?

今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架 由struts2迁移到springMVC,我突然有了一个新的疑问无法得到正确的解释,为什么我们现在做java的web开发,会选择struts2或 者springMVC这样的框架,而不是使用servlet加jsp这样的技术呢?特别是现在我们web的前端页面都是使用velocity这样的模板语 言进行开发,抛弃了jsp,这样的选择又会给我们java的web开发带

Java的web开发用什么框架好

在做Java的web开发时,不同的公司,不同的程序员可能都会采用不同的框架,使用不同的框架有什么区别,又有哪些好处呢?今天武汉java培训专家带大家和大咖一起来学习一下其中的要领:今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑问无法得到正确的解释,为什么我们现在做Java的web开发,会选择struts2或者springMVC这样的框架,而不是

HTML5移动Web开发(八)——避免文本字体大小重置

适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为我们希望能够完全掌控用户界面的设计和浏览器对页面的渲染结果. 新建ch02r02.html <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="vi

web开发常用图片格式

web开发常用图片格式有:gif   jpg/jpeg    png gif:图片压缩率高,可以显示动画,但是只能显示256色,可能造成颜色丢失. jpg:图片压缩率高(有损压缩),可以用小文件来显示,网页上比较常用. png:该格式综合了gif.jpg优势,在上传时会首先压缩到极致,但不能显示动画. 图片保真度:png > jpg > gif web开发常用图片格式

阳宇宸:Web开发语言的策略性选择

对于一些复杂型和功能型网站建设来说,可能开发语言的选择是非常重要的一步.这一步的好与坏直接影响到以后网站程序的升级以及功能的扩展.目前,在国内主流的开发语言主要有ASP/ASP.NET,PHP,JSP.那么对于对网络技术不懂的客户来说,到底该选择哪种语言,可能会是一片茫然,听别人说,更是一头雾水.下面我们来分别分析这些语言的优缺点. PHP:钱字当头,PHP是免费,而ASP是付费的.APACHE+PHP+MYSQL+LIUNX完全免费.PHP升级快有目共睹,而ASP基本都不升级.PHP代码简练,