Question

这是我目前的做法，但问题是我需要添加10px来使文本看起来像个不错的大小，因为它们真的很小，这在较小的字体大小上并不是很好。

HTML

<div class="chapter-title"> text goes here </div>

在调整大小时调用的JS函数

    var chapterTitle = this.$('.chapter-title');
    var fontSize = chapterTitle.css("font-size");
    var charCount = chapterTitle.text().replace(/ /g,'').length;

    fontSize = (chapterTitle.width()/charCount) + 10;
    chapterTitle.css('font-size', fontSize)

有人知道有更好的方法吗？文本是动态的，因此，如果只是少量文本，我不希望仅当文本不合适时才使字体变小。

Answer 1

是否有不能仅仅通过CSS更改字体大小的原因？

如果问题是小文本，我会在CSS中添加一个媒体查询以更改字体大小。

.chapter-title{
  font-size:18px;
}

@media screen and (max-width:768px){
  .chapter-title{
    font-size:24px;
  }
}

Answer 2

另一种解决方法是使用vw而不是px或em。 Vw基于视图宽度的大小，因此，例如，如果您使用的是移动设备，则文本会显得更大。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

我建议使用基于媒体的文本大小调整以及大众。也许您也可以将容器的大小设为基于百分比的大小

如何调整文本大小以适合容器

2 个答案: