如何从 iframe 的父级继承字体。 如果这是不可能的，还有什么替代方案吗？
我维护一个小网站。主菜单如下所示：
<!DOCTYPE html>
<html lang="nl">
<meta charset="utf-8">
<title>Container for iframe</title>
<style>
html, body, #main { height: 100%; }
iframe { height: 100%; width: 100%;}
body, #main { font-family: sans-serif; }
#main { background-color: azure; }
iframe, #main { height: 100%; width: 100%; }
</style>
<p>Container for iframe</p>
<p><a href="choice-1.html" target="content">Inherit font from iframe</a>
<p><a href="choice-2.html" target="content">Choice two</a>
<div id="main" style="background-color: azure; color: red">
<p>Show iframe below:
<iframe name="content" src="choice-1.html">
<p>Fall back.
</iframe>
</div>
</html>
这是子页面的html：
<!DOCTYPE html>
<html lang="nl">
<meta charset="utf-8">
<title>Test</title>
<style>
html, body {font-family: inherit;}
</style>
<h1>I am choice one</h1>
<p>I try to inherit the font from my parent, but failed...
</html>
问题是该网站应该可由对 html、css 和 javascript 知识有限的人进行管理。一个简单的解决方案将不胜感激。
Iframe 不会自动从父页面继承样式。但是，您可以在 iframe 的 URL 中将字体样式作为参数传递。
src="choice-1.html?font=sans-serif"
通过这种方式将字体信息发送到子页面，子页面可以从 URL 检索。您可以使用名为 URLSearchParams 的 JavaScript 功能来实现此目的。
这是您需要添加到子页面的脚本：
<script>
const urlParams = new URLSearchParams(window.location.search);
const font = urlParams.get('font');
if (font) {
document.body.style.fontFamily = font;
}
</script>