我很难理解字体缩放。

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

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

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

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

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


当前回答

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

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

其他回答

这对我有用:

我尝试根据设置“字体大小:10px”得到的宽度/高度来近似字体大小。基本上,这个想法是“如果我有20像素宽和11像素高的‘字体大小:10px’,那么计算50像素宽和30像素高的容器的最大字体大小是多少?”

答案是双重比例制:

{20:10=50:X,11:10=30:Y}={X=(10*50)/20,Y=(10*30)/11}

现在X是与宽度匹配的字体大小,Y是与高度匹配的字体尺寸;取最小值

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)
        parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)
        parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)
        el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)
        el_w = 0;

    // 0.5 is the error on the measure that JavaScript does
    // if the real measure had been 12.49 px => JavaScript would have said 12px
    // so we think about the worst case when could have, we add 0.5 to 
    // compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

注意:函数的参数必须是span元素或小于其父元素的元素,否则如果子元素和父元素都具有相同的宽度/高度,则函数将失败。

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

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();

使用vw,em&co.确实有效,但IMO始终需要人为的微调。

这是我刚刚根据@tnt-rox的回答编写的一个脚本,它试图使人类的触摸自动化:

$('#controller').click(function(){$('h2').each(函数){变量$el=$(此),max=$el.get(0),el=空;最大值=最大值? 最大偏移宽度: 320;$el.css({“font size”:“1em”,“display”:“inline”,});el=$el.get(0);el.get_float=函数(){变量fs=0;if(this.style&&this.style.fontSize){fs=parseFloat(this.style.fontSize.replace(/([\d\.]+)em/g,'$1'));}返回fs;};el.bigger=函数(){this.style.fontSize=(this.get_float()+0.1)+'em';};而(el.offsetWidth<max){el.bigger();}//完成触摸。$el.css({“字体大小”:((el.get_float()-0.1)+'em'),'线条高度':'正常','显示':'',});}); // 结束(每个)}); // 结束(字体缩放测试)第二部分{宽度:50%;背景色:番茄;字体系列:'Arial';}氢气{空白:nowrap;}h2:第n个孩子(2){字体样式:斜体;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script><input type=“button”id=“controller”value=“Apply”/><div><h2>Lorem ipsum dolor公司</h2><h2>测试字符串</h2><h2>甜蜜串联</h2><h2>字体缩放比例</h2></div>

它基本上将字体大小减小到1em,然后开始递增0.1,直到达到最大宽度。

JSFiddle公司

如果问题是宽屏桌面上的字体太大,我认为最简单的CSS方法应该是这样的(假设包装器最大宽度为1000像素)

.specialText{
    font-size: 2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width: 24px;
    }
}

因此,它可以自动调整大小,以适应任何小于容器最大宽度的屏幕,当屏幕更宽时(几乎所有台式机和笔记本电脑),它可以固定大小。

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

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

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

示例用法:

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