iframe可以使用父页面中的资源吗？

Question

我想在iframe中使用一种字体，我知道它将在父html页面中加载：iframe css是否可以简单地引用它，好像用户已经拥有它一样？或者我是否必须通过@ font-face再次加载它？

Answer 1

一种更为通用的方法，补充了@Mr Lister的评论：

inline frame (<iframe>)在HTML文档中加载另一个HTML文档并嵌入它。简化你可以说它是一个网站内的网站。

嵌入式CSS不会干扰其父级CSS或其他方式，因为它们属于单独的文档并且只存在于其中。正如@Mr Lister已经指出的那样，引用的资源这两个文件都不会被加载两次。

外观的任何更改都应该在子文档中进行，而不是在iframe中加载后进行。但是，你可以使用JavaScript和它的库将任何东西（样式表等）注入到加载的文档中。出于安全原因，浏览器通常仅允许对于与父级具有相同域的iframe。查看此主题以了解有关通过JavaScript注入的更多信息：Override body style for content in an iframe

Answer 2

CSS不会级联到加载到iframe中的文档中，它们是单独的文档。

您需要在加载到该文档的样式表中加入@font-face。

该文件不应再次下载，而是从浏览器的本地缓存加载（假设托管该字体的服务器有a reasonable configuration）。