我正在设计一个网页,使用font-size:calc(26px-((26-16)*(1600px-100vw)/(1600-300)));
进行字体大小插值,但问题是,我对所选字体大小和视图端口宽度的最大值(26px,1600px)
和最小值(16px,300px)
并不满意。 对于不同的屏幕宽度,建议的字体大小是什么?
字体大小不应低于16px。 这将使老年人和有眼疾的人的生活更加艰难。
你不需要用那些复杂的计算。 相反,您可以使用min()
,max()
或clamp()
当心:这些函数相对较新(特别是clamp()
)。 查看此链接以查看浏览器支持。
min()
允许您选择最小字体大小和推荐字体大小:
min(18px, 2vw) /* It will use minimum of those two */
max()
在两个值之间进行选择,并使用较大的值:
max(18px, 2vw) /* If 2wv becomes smaller than 18px, it will not use it */
clamp()
是这两种方法的组合。 您可以选择最小,常规和最大字体值:
clamp(18px, 2vw, 50px) /* If 2wv becomes smaller than 18px, it will not use it. If 2vw gets bigger than 50px, it will stay at 50px */
了解更多信息:
min(),max()
和夹紧
(优秀的youtube视频)
其实,关于最大字体大小并没有什么‘规则’。 这取决于上下文和字数的性质。 你也可以玩弄一下,把第一段做得更大一些,甚至更大胆一些,来介绍到课文中,使之成为一个小的摘要。
主要关注的是最小值。 iOS倾向于将网页内容的任何段落缩放到16像素以下。 这是本文的主要内容。 Google Material Design UI还建议使用16px作为最小正文文本大小。 16px模拟书页的正常大小。
最小的桌面可以在16-18px之间,什么似乎适合的风格最。
一些资源:
https://material.io/design/typography/the-type-system.html#type-scale
https://w3-lab.com/web-design/how-big-should-a-font-be-on-a-site-rules-of-typography/