我很难理解字体缩放。

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

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

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

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

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


当前回答

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

下面将根据容器的大小调整字体大小,无论容器是否缩放到视口的大小,或是否已达到其最大值。如果您有非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;
    }
}

其他回答

我自己的解决方案,基于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;
};

100%是相对于基本字体大小的,如果您没有设置它,它将是浏览器的用户代理默认值。

为了获得您想要的效果,我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。

纯CSS在某种程度上是可能的。

.自动调整文本大小{content:url(“data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'version='1.1'height='1.3em'width='10em'><text x='0'y='0.9em'fill='red'>这里是调整大小的文本</text></svg>“);背景色:rgba(0,0,0,0.06);动画:成长2s无限交替两者;}@关键帧增长{来自{width:100px;}到{width:300px;}}<div class=“自动调整文本大小”></div>

解释

内容规则设置元素的内容,它可以是图像的URL,包括SVG图像。SVG图像可以包含文本,因此基本上您有一个带有文本的背景图像,该图像根据其父图像的大小调整大小。您也可以使用background image属性,但与内容不同,它不会影响元素的布局,因此您需要定义父元素的大小。

这种方法的问题是,您需要定义SVG中文本的颜色、大小和位置。他们不会从父母那里继承。但你可以用Sass和Less变得聪明。此解决方案还可能存在可访问性问题。

我不建议在任何地方使用。但它在某些情况下应该相当有用。

在艺术上,如果您需要在相同的宽度内放置两行或多行文本,而不管它们的字符数如何,那么您有很好的选择。

最好找到一个动态解决方案,这样无论输入什么文本,我们都会得到一个很好的显示。

让我们看看我们可以如何接近。

var els=document.querySelectorAll(“.divtext”),refWidth=els[0].clientWidth,refFontSize=parseFloat(window.getComputedStyle(els[0],null).getPropertyValue(“字号”);els.forEach((el,i)=>el.style.fontSize=refFontSize*refWidth/els[i].clientWidth+“px”)#集装箱{显示:内联块;背景色:黑色;衬垫:0.6vw 1.2vw;}.div文本{显示:表格;颜色:白色;字体系列:影响;字体大小:4.5vw;}<div id=“container”><div class=“divtext”>这只是一个</div><div class=“divtext”>示例</div><div class=“divtext”>向您展示</div><div class=“divtext”>您想要</div></div>

我们所做的只是获取第一行的宽度(els[0].clientWidth)和字体大小(parseFloat(window.getComputedStyle(els[0],null).getPropertyValue(“字体大小”))作为引用,然后计算后续行的字体大小。

作为JavaScript回退(或您唯一的解决方案),您可以使用我的jQueryScalem插件,它允许您通过传递引用选项相对于父元素(容器)进行缩放。