我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。
我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。
如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。
我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)
我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。
我自己的解决方案,基于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解决方案,您承认断点是必要的,但也希望文本缩放:
我知道我可以添加断点,但我真的希望文本能够缩放还有额外的断点,否则。。。。
以下是一种方法:
自定义财产媒体查询断点clamp()(2022年2月的浏览器支持率为93%)计算()
如果可以使用一个通用的缩放因子来控制每个屏幕最大宽度容器内的所有文本缩放,则只需按最大宽度缩放自定义属性,并将此因子应用于1计算。
基本设置如下所示:
:root {
--scaling-factor: 1
}
.parent {
font-size: 30px
}
.largest {
font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%);
}
.middle {
font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%);
}
.smallest {
font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%);
}
然后嵌套您的媒体查询,如下所示(或断点所需的任何内容):
@media (max-width: 1200px) {
:root {
--scaling-factor: 0.9
}
@media (max-width: 800px) {
:root {
--scaling-factor: 0.8
}
@media (max-width: 600px) {
:root {
--scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
}
}
}
}
这将最小化媒体查询标记。
优势
一个自定义属性控制所有缩放。。。无需为每个媒体断点添加多个声明使用clamp()设置了字体大小的下限,这样可以确保文本永远不会太小(这里的下限是父字体大小的60%)
请查看此JSFiddle演示。调整窗口大小,直到宽度最小,段落的字体大小都相同。
我的问题类似,但与标题内的文本缩放有关。我尝试了Fit Font,但我需要切换压缩器以获得任何结果,因为它解决了一个稍微不同的问题,就像文本流一样。
所以我写了我自己的小插件,它减小了字体大小以适应容器,假设你有溢出:隐藏和空白:nowrap,这样即使将字体减小到最小也不允许显示完整的标题,它也会切断它可以显示的内容。
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);