我很难理解字体缩放。

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

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

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

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

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


当前回答

对于动态文本,此插件非常有用:

http://freqdec.github.io/slabText/

只需添加CSS:

.slabtexted .slabtext
{
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
}
.slabtextinactive .slabtext
{
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
}
.slabtextdone .slabtext
{
    display: block;
}

还有脚本:

$('#mydiv').slabText();

其他回答

尝试使用fitText插件,因为Viewport大小并不能解决这个问题。

只需添加库:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

并通过设置文本系数来更改字体大小以正确:

$("#text_div").fitText(0.8);

您可以设置文本的最大值和最小值:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

我自己的解决方案,基于jQuery,通过逐渐增加字体大小来工作,直到容器的高度大大增加(这意味着它有换行符)。

它很简单,但工作得很好,而且非常容易使用。您不必了解所使用的字体,一切都由浏览器处理。

你可以在上面玩http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

神奇就发生在这里:

var setMaxTextSize=function(jElement) {
    // Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData, fontSize);

    // Gradually increase font size until the element gets a big increase in height (i.e. line break)
    var i = 0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size", "" + (++fontSize) + "px");
    }
    while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)

    // Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize -= 1;
    jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");

    return fontSize;
};

如果容器不是主体,CSS技巧将覆盖“将文本适配到容器”中的所有选项。

如果容器是主体,则要查找的是视口百分比长度:

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时,将相应地缩放它们。但是,当根元素上的溢出值为auto时,假设不存在任何滚动条。

值为:

vw(视口宽度的%)vh(视口高度的%)vi(根元素内联轴方向上视口大小的1%)vb(根元素块轴方向上视口大小的1%)vmin(vw或vh中较小的一个)vmax(较大或vw或vh)

1v*等于初始包含块的1%。

使用它看起来像这样:

p {
    font-size: 4vw;
}

如您所见,当视口宽度增加时,字体大小也会增加,而无需使用媒体查询。

这些值是一个大小调整单位,就像px或em一样,因此它们也可以用于调整其他元素的大小,例如宽度、边距或填充。

浏览器支持非常好,但您可能需要一个后备方案,例如:

p {
    font-size: 16px;
    font-size: 4vw;
}

查看支持统计信息:http://caniuse.com/#feat=viewport-单位。

此外,请查看CSS技巧以获得更广泛的外观:视口大小的版式

这是一篇关于设置最小/最大尺寸并对尺寸进行更多控制的好文章:精确控制响应式印刷

下面是一篇关于使用calc()设置大小以使文本填充视口的文章:http://codepen.io/CrocoDillon/pen/fBJxu

此外,请查看这篇文章,它使用了一种称为“熔化引线”的技术来调整线条高度。CSS中的熔融铅

容器查询是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)。

如果这对任何人都有帮助的话,本线程中的大多数解决方案都是将文本包装成多行,形式为e。

但后来我发现了这一点,它奏效了:

https://github.com/chunksnbits/jquery-quickfit

示例用法:

$('.someText').quickfit({max:50,公差:.4})