共 2 篇相关文章
这篇讲的是CSS3字体属性中一个让人“蛋疼”又离不开的话题：iconfont和@font-face。作者从网页内容的主体——文字说起，直指@font-face这个能让你彻底摆脱用户系统字体限制的关键属性。文章没有停留在浅层介绍，而是深入拆解了@font-face的语法，逐项解释了font-family、src、unicode-range等参数，并用一个清晰的表格展示了IE、Firefox、Chrome等主流浏览器对不同字体格式（如.eot, .ttf, .woff）的支持情况。更关键的是，它厘清了@font-face与iconfont之间相辅相成的关系：一个负责引入自定义字体，一个负责将图标集打包成字体以便调用。文中提供的兼容性写法代码，对处理多浏览器环境下的字体加载问题直接提供了实用参考。
这篇讲的是CSS3 font-face特性在移动终端实际兼容性的测试报告。作者开篇点明，font-face能实现漂亮的自定义字体和高质量的图标，在PPI较高的移动设备上显示效果尤其完美，但其支持情况却参差不齐。 文章核心介绍了由BBC News的开发者Kaelig进行的一系列测试。他使用Modernizr脚本并配合另一段检测代码，来探明各主流移动浏览器真实的font-face支持情况，避免被一些声称支持但实际无法渲染的“骗人”浏览器误导。测试结果非常详尽，将移动浏览器明确分为三类：完全支持（如iOS 4/6的Safari、Android 4的Chrome和默认浏览器、Windows Phone 8的IE等）、明确不支持（主要是各平台上的Opera Mini）以及会“骗人”的浏览器（例如Windows Phone 7的IE9和Android 4的UC浏览器）。 结论指向一个现实：在移动端大规模使用自定义字体仍需谨慎。测试数据为我们划出了清晰的兼容性边界，提醒开发者在追求视觉效果的同时，必须做好针对不同浏览器环境的兼容处理。
