计算字体大小与其容器宽度之间的比例

时间:2020-03-02 12:54:14

标签: css fonts calculation typography rem

我正在研究字体大小和它们所在容器的最佳宽度之间的关系。 我知道单行文本的最佳行宽范围为每行45到75个字符。

但是也应该有一种方法可以计算出该文本容器的最佳宽度,如果我理解正确的话,“行长应该是字体类型大小的30倍左右(20到40之间)。”

就我而言,我有:

font-size: 2.488rem;
width: 55vw;

如何更改宽度大小以与字体大小成比例?

1 个答案:

答案 0 :(得分:0)

如果您的容器基于vw(视口),则可以使用font-size: Xvw,但如果您的容器基于px AFAIK,则无法像这样检测容器的宽度。

对于大众值,您甚至可以将calc()与最小值和最大值一起使用:

font-size: calc( [minFS]px + ([maxFS] - [minFS]) * (100vw + [minSS]px)/([maxSS-minSS]);

minFS-最小字体大小

maxFS-最大字体大小

minSS-最小屏幕尺寸

maxSS-最大屏幕尺寸


例如400像素的最小字体大小为16像素,最大像素为800像素,而最大像素为24像素:

font-size: calc( 16px - ( 24 - 16 ) * ( 100vw - 400px ) / ( 800 - 400 );

https://www.smashingmagazine.com/2016/05/fluid-typography/