font-face在移动终端的支持
CSS3 font-face特性不多介绍了,可以实现漂亮的自定义字体,更能用将图标转换为字体(font-icon)来实现提高图标的质量并兼容各种分辨率。而font-icon的最佳使用环境是移动终端,因为移动终端的屏幕/显示器一般PPI都比较高,字体显示的非常完美。而移动终端对font-face的支持是怎样的呢?
BBC News的Kaelig做了一系列的测试,来检测各个主流移动设备对font-face的支持,貌似并不是很乐观的样子。
由于UC浏览器不支持alert方法,所以kaelig使用了document.write方法来输出支持结果,使用的方法也很简单,用了modernizr.fontface,但是有的浏览器会欺骗你,告诉你它支持font-face,但实际上并不支持,比如Windows Phone 7中的IE9,所以他使用了另一段js来检测实际的情况。感兴趣的可以去看下测试页面。
嗯,实现方法有多种,关键是测试结果:
支持font-face的浏览器
iOS 4——Safari
iOS 6——Safari
iOS 6——QQ浏览器
iOS 6——UC浏览器
iOS 6——Dolphin
Android 2.2——默认浏览器
Android 4——默认浏览器
Android 4——Opera Mobile 12(不支持alert()方法)
Android 4——Chrome
Android 4——QQ浏览器
Android 4——Firefox
Android 4——Dolphin
Windows 8 x86(平板)——IE 10
Windows Phone 8——IE
黑莓 OS 6—— 自带浏览器
iOS6—— Opera mini
Andriod 4—— Opera mini
黑莓 OS 4—— 自带浏览器
黑莓 OS 5—— 自带浏览器
黑莓 OS 6—— Opera mini
Symbian 10 - Nokia Browser 8.3.1.4
Android 2.1 - 自带浏览器
Android 2.1 - Dolphin
WebOS 2 - 自带浏览器
WebOS 3 - 自带浏览器
Android 4 - UCBrowser
Windows Phone 7 - IE9
不支持font-face的浏览器
骗人的浏览器:
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:神飞 来源: 前端观察
- 标签: font-face
- 发布时间:2012-12-18 23:10:24
-
[928] WordPress插件开发 -- 在插件使用 -
[134] 解决 nginx 反向代理网页首尾出现神秘字 -
[52] 整理了一份招PHP高级工程师的面试题 -
[52] 如何保证一个程序在单台服务器上只有唯一实例( -
[51] 用 Jquery 模拟 select -
[50] 海量小文件存储 -
[50] Innodb分表太多或者表分区太多,会导致内 -
[50] 全站换域名时利用nginx和javascri -
[49] CloudSMS:免费匿名的云短信 -
[47] jQuery性能优化指南
