光学变焦:如何纠正传统文档模式的字体问题

分享于 

3分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

Modern和 9等现代浏览器引入了子像素字体定位,作为它硬件加速呈现HTML5内容的一部分。 当触摸手势 touch touch触摸设备的浏览体验时,它是一个重要特性,它是未来的重要一步,它启用了缩放独立文本度量。 本文展示了如何通过声明标准模式帮助你的字体在许多浏览器中更好地显示。

缩放示例:旧版 vs 标准模式

下面是side-by-side比较,显示来自popular和 10文档模式的文本,以及 100%和 % 文档模式下的。 注意 150 % 8模式示例( 右上角) 中某些字母之间的字母间距特别差。

默认大小( 100% )光学变焦至 150 %
8
10

移动到标准

这里行为的最佳修复方式是移动页的标准模式。 是一个有价值的工具,可以帮助你移植到IE9或者模式。 Compat检查器识别潜在问题并提供解决这些问题所需的步骤。 一般情况下,使用特征检测插件替换的HTML。CSS和JavaScript标记和代码将在任何浏览器检测中发挥作用,并将特定的CSS前缀更新为包括-ms-或者 unprefixed unprefixed的版本。是一个JavaScript库,可以帮助解决这些问题。

在传统模式中指定子像素度量

如果现在移动到基于标准的标记为 out-of-scope,则可以使用 HTTP header 或者 <meta> 标记在旧文档模式中启用子像素。 根据我们的测试,大多数网站在自然文本度量方面都能正常工作。

HTTP header的格式如下:

X-UA-TextLayoutMetrics: Natural

<meta> 标记的语法为:

<metahttp-equiv="X-UA-TextLayoutMetrics"content="natural"/>

对于这个 HTTP header 和 <meta> 标签的支持在 Windows 8的IE10的final 版本版本中是新的。

准备好使用 IE10

字体并不是移动到标准的唯一原因。 还有其他一些因素,如 30%更好的性能。 我们希望这些更改帮助你将站点从遗留文档模式站点移动到IE10标准模式。 在 Windows 8上使用IE10的访问者肯定会感谢你。


DOC  模式  font  ZOO  字体  传统  
相关文章