<p class="zw">毫无疑问，随着苹果公司开发出Retina 高分辨率屏幕（首次出现在iPhone4上，然后是iPad、MacBook Pro，还有5K iMac），类似的智能手机屏幕以及PC设备紧随其后，使得Web设计师和开发者的工作变得更加复杂。我们不仅要考虑为这些高分辨率设备提供不同尺寸的图像，还要考虑在不同分辨率情况下的字体渲染问题。</p> <p class="图"><img alt="1201.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/103.jpg"></p> <p class="图题">我们不确定每个人都使用高分辨率设备来阅读我们的文本，所以测试文本在不同分辨率上的显示效果是十分重要的。上方是iPad Mini Retina高清屏幕；下方是低分辨率的iPad Mini屏幕。</p> <p class="zw">带有弧形的细线字体在高分辨率屏幕上的显示效果惊人，但在分辨率低设备上的显示效果会非常拙劣。</p> <p class="zw">当我们使用细线字体的时候，首先需要考虑跨分辨率设备上的渲染效果，这是一个好习惯。如果有必要，给屏幕提供不同粗细的字体：为高分辨率屏幕使用细线字体；为低分辨率屏幕提供粗线字体。我们可以使用<code>min-resolution</code>媒体查询来解决。</p> <p class="zw">首先，设定好低分辨率屏幕上的在线字体， 在本例中，我们使用正常权重的Aller typeface字体。</p> <pre class="代码无行号"><code>body { font-family : 'Aller Regular', Helvetica, Arial, sans-serif; }</code></pre> <p class="zw">下面我们设定好最小分辨率的阈值：<code>192dpi</code>，同时，Aller字体也用更细一些的。超过<code>192dpi</code>分辨率的设备将会使用更细的Aller Light字体。</p> <pre class="代码无行号"><code>@media (min-resolution: 192dpi) { font-family : 'Aller Light', Helvetica, Arial, sans-serif; }</code></pre> <p class="zw">目前Mac OS X和iOS系统上的Safari浏览器使用的并不是标准属性，而是带设备前缀的<code>max-device-pixel-ratio</code>替代属性，所以我们需要在类型声明中加入这个属性，以便支持苹果设备。</p> <pre class="代码无行号"><code>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { font-family : 'Aller Light', Helvetica, Arial, sans-serif; }</code></pre> <p class="zw">在例子中，我们指定了dpi，低分辨率的传统屏幕一般是72dpi，但打印或印刷通常需要更高的dpi。dpi并不是唯一的分辨率单位，我们还可以使用以下两种。</p> <ul> <li class="第1级无序列表"><strong>dpcm：</strong>每厘米点数</li> <li class="第1级无序列表"><strong>dppx：</strong>每像素包含点数</li> </ul> <p class="zw">IE9到IE11只支持dpi，在我写这本书的时候，Opera Mini也是只支持dpi。</p>
