我很难理解字体缩放。

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

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

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

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

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


当前回答

为了使字体大小适合其容器,而不是窗口,请参阅我在这个问题中分享的resizeFont()函数(其他答案的组合,其中大多数已经链接到这里)。它使用window.addEventListener('size',resizeFont);触发;。

Vanilla JavaScript:调整字体大小以适应容器

JavaScript:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

您可能可以使用vw/vh作为备用,因此您可以使用JavaScript动态分配em或rem单位,确保在禁用JavaScript时字体可以缩放到窗口。

将.resize类应用于包含要缩放的文本的所有元素。

在添加窗口调整大小事件侦听器之前触发函数。然后,当加载页面以及调整页面大小时,任何不适合其容器的文本都将被缩小。

注意:默认字体大小必须设置为em、rem或%,以获得正确的结果。

其他回答

如果容器不是主体,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中的熔融铅

这对我有用:

我尝试根据设置“字体大小: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://simplefocus.com/flowtype/.这是我在我的网站上使用的,而且效果很好。

使用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在某种程度上是可能的。

.自动调整文本大小{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变得聪明。此解决方案还可能存在可访问性问题。

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