最近发表了几篇关于流体字体的文章。
Matt Smith(称之为“灵活字体”)
我更喜欢使用
:root
选择器根据视口高度和宽度计算字体大小,以实现更灵活的字体。
Richard Rutter(称之为“响应式显示文本”)
您可以一举将显示标题的大小设置为与屏幕或浏览器宽度成比例,而不是从一系列媒体查询中的比例尺中进行选择。
两者都与利用视口单位来调整字体大小有关,这些字体不会在断点处从一个尺寸跳到另一个尺寸,而是平滑地缩放。
我强烈建议查看 Mike Riethmuller 的 流体字体,它几乎同样简单,但允许设置最小和最大尺寸,这对我来说感觉是最佳方案。
我最近 在 CodePen 博客中转向了流体字体,我非常喜欢它。请注意,我们也借鉴了 Mike 的流体模块化比例。也就是说,在大屏幕上,h1-h6 之间的尺寸差异更大,而在小屏幕上,则会缩小,所有这些都以流体的方式进行。
“流体字体”灵感来自(或说剽窃自)@MikeRiethmuller,现已在 @CodePen 博客上线。包括“流体模块化比例!” pic.twitter.com/0yJk8Iq8fR
— Chris Coyier (@chriscoyier) 2016年10月27日
Tim Brown 将这些最小值和最大值称为 “CSS 锁定”,并演示了它不仅对font-size
,而且对line-height
也很有用。
值得查看我们最近发布的文章 简化的流体排版,了解基于视口的实用、受限的字体大小调整。
我真的很喜欢这种技术,但我确实认为(就像网络上的许多东西一样)你需要小心使用它。我见过一些人在实现流体字体时没有限制大小的例子,这会导致字体变得非常大。最终的结果是在字符数方面得到了良好的行长,但由于观看距离而导致可读性差(就我个人而言,我认为正文超过 30px 的任何字体从大约一英尺远的地方看都很奇怪且难以阅读)。
对于大型显示器(如数字信息亭和客厅电视),在缩放最大值方面慷慨一些可能是解决这些情况下充分支持超大文本的办法。
但即使对于在未启用任何 UI 缩放的系统上使用的 4k 显示器,我也发现某些网站上的文本难以阅读,因为字体太小。
很好奇地想了解流体字体如何除了视口大小之外还能解决像素密度问题。
@chris coyier,这可能是一个机会,可以扩展您屏幕尺寸分析文章中的 UX 数据 :) https://css-tricks.org.cn/google-analytics-can-show-screen-resolution-%E2%89%A0-browser-window/
我只是使用 VW 单位(视口宽度)和一个小屏幕的媒体查询
也可能要告别缩放了。请 阅读此文。
也许是因为我是编码新手,但对我来说,'em' 完全不起作用,因为我尝试使用分段构建语义代码,有时我会在其中嵌套三个/四个 aria-hidden h1。此外,'vh' 和 'vw' 也不完美,因为它们对缩放不敏感。目前,我仍在寻找我的第一个网页的最佳自适应解决方案,并尝试使用基于媒体查询的 vmin、vmax(在 body 标签中用于字体大小)和用于标题的 'rem' 进行实验。感谢 Chris 发布这篇文章。希望还能阅读更多基于不同经验和想法的评论,这些评论来自您专业的读者。