css - 字体大小尽可能大以适合窗口宽度

Question

是否有任何技巧可以将 font-size 设置得尽可能大，以便文本始终适合窗口宽度？

我尝试使用 vw，但我确信 CCS 比那更丰富。

.font{
font-family:Arial;
font-size:7vw;
display:table;
height:100vh;
width:100vw;
}

.inner{
display:table-cell;
vertical-align:middle;
text-align:center;

}

<div class=font>
<div class=inner>abcdefghijklmnopqrstuvwxyz</div>
</div>

提前致谢。

Answer 1

嗯，您的代码已经很聪明了。我真的看不出有任何可以改进的地方。

你绝对应该检查这个问题，指向一个似乎非常方便的 Jquery 插件:Auto-size dynamic text to fill fixed size container .

所以，我们将其作为第一个解决方案:

body {
  margin: 0;
}

.font {
  font-family: Arial;
  font-size: 49vw;
  display: table;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class=font>
  <div class=inner>glee</div>
</div>

我的建议(虽然这对语义、屏幕阅读器来说很糟糕……)可能是尝试使用背景图像和 background-size: contain;。请务必使用 SVG 文本!

body {
  margin: 0;
}

.font {
  font-family: Arial;
  font-size: 6vw;
  display: table;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.inner {
  display: table-cell;
  background: center no-repeat;
  background-size: contain;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmc6c3ZnCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmlld0JveD0iMCAwIDExNy4xNDU0OCA2My44MzEwMDEiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzExIgogICBzb2RpcG9kaTpkb2NuYW1lPSJHbGVlX3RpdGxlX2NhcmQuc3ZnIgogICB3aWR0aD0iMTE3LjE0NTQ4IgogICBoZWlnaHQ9IjYzLjgzMTAwMSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi4zICgyNDA1NTQ2LCAyMDE4LTAzLTExKSI+CiAgPHN2ZzptZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE3Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9zdmc6bWV0YWRhdGE+CiAgPHN2ZzpkZWZzCiAgICAgaWQ9ImRlZnMxNSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MTgiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTAzMCIKICAgICBpZD0ibmFtZWR2aWV3MTMiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIgogICAgIGlua3NjYXBlOnpvb209IjIuOTE0ODUxMyIKICAgICBpbmtzY2FwZTpjeD0iMTQuNDYzOTY5IgogICAgIGlua3NjYXBlOmN5PSI4LjczMjc4NTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI1IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMTEiIC8+CiAgPHN2ZzpwYXRoCiAgICAgZD0iTSAxNS4yMTg4LDE2LjcwNiBDIDYuODE1NiwxNi43MDYgMCwyNC4yOTg4IDAsMzMuNjQzNSBjIDAsOS4zNDQ3IDYuODE1NSwxNi45MDYzIDE1LjIxODgsMTYuOTA2MyA0LjkzNzUsMCA5LjMxNCwtMi42MzQ3IDEyLjA5MzgsLTYuNjg3NSB2IDYuNTYyNSBjIDAsNC4zNDkxIC0zLjk3NzgsNy44MTI1IC05LDcuODEyNSAtNC4xNTk5LDAgLTcuNjIzNywtMi4zNjk3IC04LjY4NzUsLTUuNjU2MyBIIDMuMDYyNiBjIDEuMjAwMSw2LjM0OTcgNy41OTExLDExLjI1IDE1LjI1LDExLjI1IDguNTA2NywwIDE1LjQ2ODgsLTYuMDM5NiAxNS40Njg4LC0xMy40MDYzIFYgMTcuNzA1OSBoIC02LjQ2ODggdiA1LjY1NjMgQyAyNC41MzIxLDE5LjMyMTUgMjAuMTQ3NywxNi43MDU5IDE1LjIxODgsMTYuNzA1OSBaIG0gMi41OTM4LDYuNTYyNSBjIDUuNjQ4NiwwIDEwLjIxODgsNC41NzAxIDEwLjIxODgsMTAuMjE4OCAwLDUuNjQ4NyAtNC41NzAxLDEwLjI1IC0xMC4yMTg4LDEwLjI1IC01LjY0ODcsMCAtMTAuMjE4OCwtNC42MDE0IC0xMC4yMTg4LC0xMC4yNSAwLC01LjY0ODYgNC41NzAxLC0xMC4yMTg4IDEwLjIxODgsLTEwLjIxODggeiIKICAgICBpZD0icGF0aDQiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MSIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDxzdmc6cGF0aAogICAgIGQ9Im0gMzkuOTI4NiwwIHYgNDkuNDY4OCBoIDYgViAwIFoiCiAgICAgaWQ9InBhdGg2IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICA8c3ZnOnBhdGgKICAgICBpZD0iZSIKICAgICBkPSJtIDY1LjI4MTMsMTYuODkzNSBjIC01LjM2MDY4LDAuMzcxNzM3IC0xMC40Njk4LDMuMzM0NyAtMTMuMzQzOCw4LjMxMjUgLTQuNTk4Myw3Ljk2NDUgLTEuODM5NSwxOC4yNDU1IDYuMTI1LDIyLjg0MzggNy45NjQ1LDQuNTk4MyAxOC4yMTQyLDEuODM5NSAyMi44MTI1LC02LjEyNSBsIC01LjUzMTMsLTMuMTg3NSBjIC0yLjg2MzUsNC45NTk3IC05LjEzNDAyLDYuNTgyMjMgLTE0LjA5MzgsMy43MTg4IC0yLjc5OTcyLC0xLjYxNjM3IC00LjUyNjQsLTQuMjkzNiAtNSwtNy4yMTg4IGggMjYuODEyNiBjIDAuNjQ3NiwtNi40NDYgLTIuNTMwODksLTEyLjgwNTAyNiAtOC4yODEzLC0xNi4xMjUgLTIuNjEzMzksLTEuNTA4ODI2IC01LjQ4NjgyLC0yLjIzOTE0OCAtOC4zMTI1LC0yLjI1IC0wLjQxNTg0LC0wLjAwMTYgLTAuODM3NTcsMC4wMDY5IC0xLjE4NzQsMC4wMzEyIHogbSAxLjE1NjMsNi4zNDM3IGMgMS43MzcxMSwtMC4wMDI2IDMuNDk3NiwwLjQ2NjcgNS4xMjUsMS40MDYzIDEuOTAwOSwxLjA5NzUgMy4zNDY4LDIuNzE2MyA0LjIxODgsNC41OTM4IEggNTcuMDkzOSBjIDAuMTI4OCwtMC4yNzUzIDAuMjUxMSwtMC41NDM4IDAuNDA2MywtMC44MTI1IDEuNzg5NywtMy4wOTk4IDQuOTAyODEsLTQuOTIyMTcxIDguMTg3NSwtNS4xNTYzIDAuMjYwNDMsLTAuMDE4NTYgMC41MjU3NSwtMC4wMzA5NiAwLjc0OTksLTAuMDMxMyB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICA8c3ZnOnVzZQogICAgIHg9IjM0IgogICAgIHhsaW5rOmhyZWY9IiNlIgogICAgIGlkPSJ1c2U5IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgeT0iMCIKICAgICB3aWR0aD0iMTAwJSIKICAgICBoZWlnaHQ9IjEwMCUiIC8+CiAgPGRpdgogICAgIGlkPSJkaXZTY3JpcHRzVXNlZCIKICAgICBzdHlsZT0iZGlzcGxheTogbm9uZSIgLz4KICA8c2NyaXB0CiAgICAgaWQ9Imdsb2JhbFZhcnNEZXRlY3Rpb24iCiAgICAgc3JjPSJtb3otZXh0ZW5zaW9uOi8vYTAyOWVkZjktOWZhMS00YjhjLTlhZjYtZmIwNWUxMTM5YTFiL2pzL3dyc19lbnYuanMiIC8+Cjwvc3ZnOnN2Zz4K)
}

<div class=font>
  <div class=inner></div>
</div>

并且，以防万一，您可能需要添加 word-break: break-all，以确保即使由于某种原因未正确加载字体，文本仍然可读。