再次谈谈流体字体

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

最近发表了几篇关于流体字体的文章。

Matt Smith(称之为“灵活字体”)

我更喜欢使用:root选择器根据视口高度和宽度计算字体大小,以实现更灵活的字体。

Richard Rutter(称之为“响应式显示文本”)

您可以一举将显示标题的大小设置为与屏幕或浏览器宽度成比例,而不是从一系列媒体查询中的比例尺中进行选择。

两者都与利用视口单位来调整字体大小有关,这些字体不会在断点处从一个尺寸跳到另一个尺寸,而是平滑地缩放。

我强烈建议查看 Mike Riethmuller 的 流体字体,它几乎同样简单,但允许设置最小和最大尺寸,这对我来说感觉是最佳方案。

我最近 在 CodePen 博客中转向了流体字体,我非常喜欢它。请注意,我们也借鉴了 Mike 的流体模块化比例。也就是说,在大屏幕上,h1-h6 之间的尺寸差异更大,而在小屏幕上,则会缩小,所有这些都以流体的方式进行。

Tim Brown 将这些最小值和最大值称为 “CSS 锁定”,并演示了它不仅对font-size,而且对line-height也很有用。

值得查看我们最近发布的文章 简化的流体排版,了解基于视口的实用、受限的字体大小调整。