我很难理解字体缩放。

我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。

我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。

如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。

我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)

我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。


当前回答

容器查询是CSS功能集(2022年末)的最新添加,使这一点变得简单明了。

它们允许您基于包含元素的大小应用样式,但也提供了一组用于容器查询宽度/高度的新CSS单元cqw/cqh。要使用它们,需要在要使用其大小的父元素上设置容器类型属性。下面是一个最小的示例:

<div><p>Lorem ipsum dolor坐amet</p></div><style>第二部分{容器类型:内联大小;}p型{字体大小:5cqw;}</style>

随着父容器的增长,字体大小将平稳增加。在1000像素的容器宽度下,p字体大小将为1000像素/100*5=50像素。

容器类型可以是大小或内联大小。size跟踪容器的高度和宽度,允许您同时使用cqw和cqh。在网络上的大多数时间,高度是根据内容计算的,您只需指定宽度。为了节省浏览器的一些工作,您通常需要设置容器类型:inline-size;因此,浏览器只跟踪通常为宽度的内联维度(除非将写入模式设置为垂直)。

2022年下半年,浏览器对容器查询的支持快速增长,目前为75%(2023-01-01)。

其他回答

直接媒体查询似乎是一种更简单、更容易理解的解决方案,可以根据容器大小调整字体大小,而容器大小可能是动态的。

下面将根据容器的大小调整字体大小,无论容器是否缩放到视口的大小,或是否已达到其最大值。如果您有非100%宽的容器,可以相应地调整vw。

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

尝试http://simplefocus.com/flowtype/.这是我在我的网站上使用的,而且效果很好。

SVG解决方案:

.树脂土{调整大小:两者;边距:0;填充:0;高度:75px;宽度:500px;背景色:浅蓝色;溢出:隐藏;}<div class=“resizeme”><svg宽度=“100%”高度=“100%”viewBox=“0 0 500 75”preserveAspectRatio=“xMinYMid满足”style=“背景色:绿色”xmlns=“http://www.w3.org/2000/svg"xmlns:xlink=“http://www.w3.org/1999/xlink"><文本x=“0”y=“75”font size=“75”fill=“黑色”>█调整此大小█</文本></svg></div>

使用foreignObject的SVG和文本换行解决方案:

.树脂土{调整大小:两者;边距:0;填充:0;高度:200px;宽度:500px;背景色:浅蓝色;溢出:隐藏;}<div class=“resizeme”><svg宽度=“100%”高度=“100%”viewBox=“0 0 500 200”preserveAspectRatio=“xMinYMin满足”><foreignObject width=“100%”height=“100%”xmlns=“http://www.w3.org/1999/xhtml"><div xmlns=“http://www.w3.org/1999/xhtml“style=”背景色:浅绿色;"><h1>标题</h1><p>调整蓝色框的大小</p></div></foreignObject></svg></div>

如果要将其放入特定容器(如div)中,请使用:

width: max-content;

调整字体大小也有很大帮助,例如字体大小:75%。

我的问题类似,但与标题内的文本缩放有关。我尝试了Fit Font,但我需要切换压缩器以获得任何结果,因为它解决了一个稍微不同的问题,就像文本流一样。

所以我写了我自己的小插件,它减小了字体大小以适应容器,假设你有溢出:隐藏和空白:nowrap,这样即使将字体减小到最小也不允许显示完整的标题,它也会切断它可以显示的内容。

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });
  };
})(jQuery);