我很难理解字体缩放。

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

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

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

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

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


当前回答

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>

其他回答

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

功能如下:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

然后将所有文档子元素的字体大小转换为em或%。

然后向代码中添加类似的内容以设置基本字体大小。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

你可能正在寻找这样的东西:

http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/

我使用过flowtype,它工作得很好(不过它是JavaScript而不是纯CSS解决方案):

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});

纯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变得聪明。此解决方案还可能存在可访问性问题。

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

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

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

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

示例用法:

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