使用内联CSS设置<iframe>文本大小无效，求可行解决方法

直接在iframe标签上设置font-size不会生效，因为iframe加载的是独立的HTML文档，父页面的样式没法直接渗透到子页面里。以下是几种可行的解决办法：

• 修改iframe源页面的样式
  如果你有权限改动iframe指向的src页面代码，直接在该页面的CSS里设置全局字体大小就行，比如：

  body {
    font-size: 20px !important;
  }
  

• 通过JavaScript操作iframe文档（需同源）
  只有当iframe的源和父页面是同源（同域名、同协议、同端口）时才能用这个方法。用JS获取iframe的文档对象，然后插入样式：

  const iframe = document.getElementById('myiframe');
  iframe.onload = function() {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    const styleTag = iframeDoc.createElement('style');
    styleTag.textContent = 'body { font-size: 20px; }';
    iframeDoc.head.appendChild(styleTag);
  };
  

• 用CSS transform缩放整个iframe
  要是没法改源页面，而且iframe和父页面不同源，可以试试缩放整个iframe容器，同时调整容器尺寸避免留白：

  #myiframe {
    transform: scale(1.2); /* 按需调整缩放比例 */
    transform-origin: top left;
    width: calc(100% / 1.2); /* 反向计算宽度，保持容器占原空间 */
    height: calc(230px / 1.2); /* 对应原高度反向调整 */
  }
  

  注意：这种方法是缩放整个iframe内容，不是单独调整字体，适合应急场景。

内容的提问来源于stack exchange，提问作者Salman