我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
我想喜欢接受的答案，但从根本上说，符合我的标准的答案都需要使用图书馆。我决定编写一个非常适合我的简单函数，而不是让自己熟悉另一个库，然后找出如何使用它并准备在它不工作时进行调试。
理论：
传入需要匹配的字符串传入要从中继承文本样式的父级可选地传入自定义属性（例如，您将从中继承字体和其他属性的类/id，或者仅传入自定义内联样式）函数将在屏幕外创建一个文本元素，其中包含该文本、该父元素和这些属性，字体大小为1px，并对其进行测量然后，在循环中，它将逐像素增加字体大小，直到超过宽度限制；一旦完成，它将返回最后一个合适的然后删除测试元素当然，这一切都发生在眨眼之间
限制：
我不在乎动态调整屏幕大小，因为这与我的上下文无关。在生成文本时，我只关心运行时的屏幕大小。我依赖一个小助手函数，我也在代码的其他地方使用它，它基本上作为mithril.js的单函数版本存在；老实说，我几乎在每个项目中都使用这个小功能，它值得自己学习。
function findMaxFontSize(
string="a string",
parent=document.body,
attributes={id:'font-size-finder',class:'some-class-with-font'}
) {
// by using parent, we can infer the same font inheritance;
// you can also manually specify fonts or relevant classes/id with attributes if preferred/needed
attributes.style = 'position:absolute; left:-10000; font-size:1px;' + (attributes.style || "");
let testFontEl = createEl('p', attributes, string);
parent.appendChild(testFontEl);
let currentWidth = testFontEl.offsetWidth;
let workingFontSize = 1;
let i = 0;
while (currentWidth < maxWidth && i < 1000) {
testFontEl.style.fontSize = Number(testFontEl.style.fontSize.split("px")[0]) + 1 + "px";
currentWidth = testFontEl.offsetWidth;
if (currentWidth < maxWidth) {
workingFontSize = testFontEl.style.fontSize;
}
i++; // safety to prevent infinite loops
}
console.log("determined maximum font size:",workingFontSize,'one larger would produce',currentWidth,'max width allowed is',maxWidth,'parent is',parent);
parent.removeChild(testFontEl);
return workingFontSize.split("px")[0];
}
// utility function, though you could easily modify the function above to work without this.
// normally these have no default values specified, but adding them here
// to make usage clearer.
function createEl(tag="div", attrs={class:'some-class'}, children=[]) {
let el = document.createElement(tag);
if (attrs) {
Object.keys(attrs).forEach(attr => {
el.setAttribute(attr, attrs[attr])
})
}
if (children) {
children = Array.isArray(children) ? children : [children];
for (let child of children) {
if (typeof child === "number") child = ""+child;
if (typeof child === "string") {
el.insertAdjacentText("afterbegin", child);
}
else {
try {
el.appendChild(child)
} catch (e) {
debugger
}
}
}
}
return el;
};
use:
const getUsername = () => "MrHarry";
const username = getUsername();
const anchor = document.querySelector('.container');
const titleFontSize = findMaxFontSize(`Welcome, ${username}`, anchor, {style:'font-weight:900;'});
const titleFontStyle = `font-size:${titleFontSize}px;`;
其他回答
直接媒体查询似乎是一种更简单、更容易理解的解决方案，可以根据容器大小调整字体大小，而容器大小可能是动态的。
下面将根据容器的大小调整字体大小，无论容器是否缩放到视口的大小，或是否已达到其最大值。如果您有非100%宽的容器，可以相应地调整vw。
.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}
对于动态文本，此插件非常有用：
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();
如果问题是宽屏桌面上的字体太大，我认为最简单的CSS方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
我想喜欢接受的答案，但从根本上说，符合我的标准的答案都需要使用图书馆。我决定编写一个非常适合我的简单函数，而不是让自己熟悉另一个库，然后找出如何使用它并准备在它不工作时进行调试。
理论：
传入需要匹配的字符串传入要从中继承文本样式的父级可选地传入自定义属性（例如，您将从中继承字体和其他属性的类/id，或者仅传入自定义内联样式）函数将在屏幕外创建一个文本元素，其中包含该文本、该父元素和这些属性，字体大小为1px，并对其进行测量然后，在循环中，它将逐像素增加字体大小，直到超过宽度限制；一旦完成，它将返回最后一个合适的然后删除测试元素当然，这一切都发生在眨眼之间
限制：
我不在乎动态调整屏幕大小，因为这与我的上下文无关。在生成文本时，我只关心运行时的屏幕大小。我依赖一个小助手函数，我也在代码的其他地方使用它，它基本上作为mithril.js的单函数版本存在；老实说，我几乎在每个项目中都使用这个小功能，它值得自己学习。
function findMaxFontSize(
string="a string",
parent=document.body,
attributes={id:'font-size-finder',class:'some-class-with-font'}
) {
// by using parent, we can infer the same font inheritance;
// you can also manually specify fonts or relevant classes/id with attributes if preferred/needed
attributes.style = 'position:absolute; left:-10000; font-size:1px;' + (attributes.style || "");
let testFontEl = createEl('p', attributes, string);
parent.appendChild(testFontEl);
let currentWidth = testFontEl.offsetWidth;
let workingFontSize = 1;
let i = 0;
while (currentWidth < maxWidth && i < 1000) {
testFontEl.style.fontSize = Number(testFontEl.style.fontSize.split("px")[0]) + 1 + "px";
currentWidth = testFontEl.offsetWidth;
if (currentWidth < maxWidth) {
workingFontSize = testFontEl.style.fontSize;
}
i++; // safety to prevent infinite loops
}
console.log("determined maximum font size:",workingFontSize,'one larger would produce',currentWidth,'max width allowed is',maxWidth,'parent is',parent);
parent.removeChild(testFontEl);
return workingFontSize.split("px")[0];
}
// utility function, though you could easily modify the function above to work without this.
// normally these have no default values specified, but adding them here
// to make usage clearer.
function createEl(tag="div", attrs={class:'some-class'}, children=[]) {
let el = document.createElement(tag);
if (attrs) {
Object.keys(attrs).forEach(attr => {
el.setAttribute(attr, attrs[attr])
})
}
if (children) {
children = Array.isArray(children) ? children : [children];
for (let child of children) {
if (typeof child === "number") child = ""+child;
if (typeof child === "string") {
el.insertAdjacentText("afterbegin", child);
}
else {
try {
el.appendChild(child)
} catch (e) {
debugger
}
}
}
}
return el;
};
use:
const getUsername = () => "MrHarry";
const username = getUsername();
const anchor = document.querySelector('.container');
const titleFontSize = findMaxFontSize(`Welcome, ${username}`, anchor, {style:'font-weight:900;'});
const titleFontStyle = `font-size:${titleFontSize}px;`;
使用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公司
