我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
有一种不使用JavaScript的方法可以做到这一点！
您可以使用内联SVG图像。如果SVG是内联的，则可以在SVG上使用CSS。您必须记住，使用此方法意味着您的SVG图像将响应其容器大小。
尝试使用以下解决方案。。。
HTML
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>
CSS
div {
width: 50%; /* Set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}
例子：https://jsfiddle.net/k8L4xLLa/32/
想要更华丽的东西吗？
SVG图像还允许您对形状和垃圾进行处理。看看这个可扩展文本的好用例。。。
https://jsfiddle.net/k8L4xLLa/14/
其他回答
我的问题类似，但与标题内的文本缩放有关。我尝试了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);
为了使字体大小适合其容器，而不是窗口，请参阅我在这个问题中分享的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或%，以获得正确的结果。
我自己的解决方案，基于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;
};
这个问题有一个大的哲学。
最简单的方法是给body指定一个特定的字体大小（我建议10），然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级：
body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */
Rem始终相对于身体：
body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */
然后，您可以创建一个脚本，该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如，在一个900像素宽的容器中，你会有一个字体大小为12像素的p元素。根据你的想法，它将变成一个300像素宽的容器，字体大小为4像素。必须有一个下限。
其他解决方案是媒体查询，这样您就可以为不同的宽度设置字体。
但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。
作为JavaScript回退（或您唯一的解决方案），您可以使用我的jQueryScalem插件，它允许您通过传递引用选项相对于父元素（容器）进行缩放。
