的注意，但对于我们的示例来

suraiyaislamsum

说，当图像放在文章前面时，左侧的图像太分散注意力了。 如果愿意，我们可以将文本在 z 轴上向前移动，通过为文本创建可见容器来更加关注我们的副本并不再强调辅助内容。这是我们可以在网页设计中轻松使用的策略，而书籍不需要： body { background: fcfcfc; } article { background: fff; border: 1px solid eee; padding: 2em 3em 4em; } 复制 我们的页面已经感觉更加平衡并且不那么令人生畏，但是我们可以在文本正文中使用更多技术来进一步增强可读性。 选择可读字体  字体的选​​择是一个微观问题，但它对宏观外观的影响却是巨大的。Jost Hochuli在《版式设计的细节》一书中最好地概述了这种相互依赖关系：“在版式设计中，永远不能孤立地考虑细节。” 在考虑样式之。

前，应根据屏幕上的可读性来选择正文的字体。标题和引言是发挥排版创造力的绝佳机会，但将长篇大论的文本留给可靠的可读主力，例如 Georgia、Arial 和 Myriad，它们都是为在背光屏幕上获得最佳阅读而设计的。 在数字屏幕上更具可读性的字体通常具有以 购买电话号码列表 下属性： 高 x 高度； 宽度稍宽，但不压缩或扩展； 大多缺乏风格； 较大字体使用衬线字体，较小字体使用无衬线字体。 所有这些规则都有例外，但它们应该成为您为正文选择字体时的指导原则。我发现以下一些字体堆栈具有一定的风格，提供适当的后备，并且都具有很高的可读性：复制 保持测量  在设置任何文本块时，我们必须考虑其大小。度量由每行的字符数或单词数定义。我使用单词是因为它们更容易计算，并且我尝试遵循 Tshichold 的建议，每。



行 8 到 12 个单词。如果您的度量基于字符，那么每行 45 到 85 个字符是理想的。一旦设置了边距和宽度，就可以通过 CSS 中的两个属性font-size和来实现适当的测量word-spacing。 在决定大小时，要在字体足够小以使读者在跳到下一行时不会太分心和足够大以使他们不必倾身阅读屏幕上的文本之间取得平衡。对于大多数字体，16 像素效果很好。其他因素可能会导致您将其放大或缩小，但 16 像素是一个很好的起点。至于字间距，大多数浏览器都可以很好地为您设置此值，但如果您在获得适当的测量值时遇到困难，那么无论哪种方式稍微欺骗此属性都会很方便。 在实践中 ＃ 在我们的页面上，让我们添加 16 像素的字体大小，并稍微修改一下字间距以达到适当的尺寸（所有主流浏览器都word-spacing支持）。您。