【译】采用响应式排版的新网站

最新推荐文章于 2024-07-09 01:55:28 发布

置顶 hutaoer06051

最新推荐文章于 2024-07-09 01:55:28 发布

阅读量774

点赞数

分类专栏： CSS web前端文章标签：视网膜屏幕响应式布局

CSS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

web前端

12 篇文章 0 订阅

订阅专栏

原文链接：http://ia.net/blog/responsive-typography/

作者：OLIVER REICHENSTEIN

译者：左御

随着不同设备屏幕尺寸的出现和新一代web浏览器的诞生，布局和排版的设计模式已经从静态的布局、系统的字体转变成动态的布局、web字体。现在，不仅屏幕的尺寸在变化，像素密度也在发生变化。换句话说，我们不仅需要响应式的布局，同时也需要响应式的字体。为了验证这一假设，IA创建了它的新网站，使用了响应式排版和定制的响应字体。

我们拥有四个尺寸不同的屏幕和分辨率，包括MacBook Air, Nokia Lumia 900, Samsung Galaxy以及iPad3.直到最近，我们仅有两种系统字体可供选择，没有其他更多的选择。对于serifed字体，主要有一种(Georgia)，对于sans-serifed字体有两到三种(主要是Arial和Verdana)。这类字体是90年代初期，为那些现在我们看起来分辨率较低的屏幕设计的。它们已经工作了足够长的时间。不幸的是，它们在高像素密度的屏幕下显示并不好，为什么呢？

再见，Georgia?

网页的字体设置为16px及其以下的时候，Georgia字体显示很完美。一旦字体大小超过16px，她就开始变得奇怪。这并不是字体设计的缺陷，它本来就不是为大的字体和高密度像素的屏幕设计的。

这正是为什么完美要设计自定义字体，用它来适应不同的分辨率。我们称之为iABC（很多形状的灵感都来源于同一个项目的一小部分）。目前我们仅能够在移动设备和OSX系统中看到它。在iABC出现之前，PC用户们将看到Georgia.

现在回想起来，设计一种自定义的字体是一种纯粹的疯狂，微调的结果是差异越来越大。TypoBerlin的专业字体设计师们一直眉头紧锁，面对如此多的颠簸和间距错误。

我们的新字体也相当的无聊和概念化。但是我们的目的并不是说服一个最好的字体设计师，告诉他我们可以创造最好的字体。我们的目的是要测试我们响应式排版的概念。由于几乎没有任何屏幕的字体提供这种功能，我们只有自己去创造。不同条件中使用渐变字体这个想法早就有过。很长一段时间以来，报纸一直针对不同质量的纸张使用不同级别的字体。

我们的自定义字体可以可以自由的嵌入到网站的所有图形化元素中。除了实际的图片，整个网站的字体都可以由它来构造。

什么样的字体在什么情形下使用，为什么？

现在，情况变得复杂了。因为存在很多不同尺寸的屏幕，像素分辨率和渲染过程，这有助于我们记住以下一些规则：

PC: 大多数情况下，系统字体看上去还不错。自定义字体将变成一场噩梦，如果没有被暗示的话。
OSX：在低分辨率屏幕下，系统字体很好看（例如旧的PowerBook G4 12英寸），它们在高分辨率屏幕下看上去太粗了（MacBook Pro），在retina屏幕（下一代MacBook Pro）上看上去还行。较细的字体在高分屏下看上去很出色，但在高分屏下它们太细了。
iOS：在高分屏(iPhone 1-3,iPad 1-2,)和看上去很粗,视网膜屏幕iPad3下还不错。为了在Retina屏下展示完美的HTML页面，在portrait模式下你需要一个更粗的字体，在landscape模式下你需要一个正常的weight值。如果想在高分屏下表现完美，则需要一个较细的字体。

现在，下面的名单可能会让你更迷惑。把它用简单的话来说：表现要超过低分屏以及PC以外的其他屏幕，你需要三种字体级别：

更细的（高分屏）
通常的（Retina landscape HTML mode）
更粗的（for Retina portrait HTML mode）

展示给我看！

你可以看到它就在这里，实际上，你不能看到。你不能在同一台设备上看到响应式排版。你甚至不能在不同设备上对响应式排版进行比较，即使它做出了正确的响应。响应式排版意味着字体看上去总是一样的。让我们来看两个例子：

如果你眯着眼睛，你会发现，A和C看起来是一样的。然而，A和B实际上使用了相同的字体。这意味着，如果想让字体在iPad2和iPad3上看起来一样，在低分辨率屏幕上，字体需要设置细一些。

对于这个网站，我们使用了三个层级。给高分屏更细的字体（顶部），给视网膜横向模式屏幕普通字体（中），给视网膜人像模式屏幕更粗的字体（底部）。再次，如果你眯着眼，你可以看到，三个不同层次的字体设置看上去几乎相同。

为什么你会如此在意？

现在，在任何情况下说这种大话是不可能的。让Mac和PC的屏幕上字体看起来一样是根本不可能的，但这也不是什么大新闻。但是，响应式的布局和响应式的字体可以创建一个更好的数字阅读体验。一个网站的字体可读性越强，网站的可阅读性越好。大多数用户无法辨别排版的好坏，但是他们能感觉得到。现在，我希望我们的provisory 字体不会让你感到不舒服。

如果你想听到更多的关于这部分的内容，我们刚刚开始了一系列响应式排版的讲解，这是第一部分。