es realmente extraño, pero mi iFrame innerHTML no acepta algunas fuentes.
Aquí hay un ejemplo de mi código:
Esta fuente funciona:
Cabeza:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comforter&display=swap" rel="stylesheet">Cuerpo:
<iframe id="textBox" name="richTextFeld"></iframe> <script type="text/javascript"> function onLoad() { richTextFeld.document.designMode = 'On'; richTextFeld.document.body.style.fontFamily = "'Comforter', cursive"; richTextFeld.document.body.style.fontSize = "16px"; richTextFeld.document.body.style.color = "#ff0000"; richTextFeld.document.body.innerHTML = "Some Text"; } </script>Y esta fuente no funciona (he marcado las dos diferencias con dos **):
Cabeza:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> **<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">**Cuerpo:
<iframe id="textBox" name="richTextFeld"></iframe> <script type="text/javascript"> function onLoad() { richTextFeld.document.designMode = 'On'; **richTextFeld.document.body.style.fontFamily = "'Raleway', sans-serif";** richTextFeld.document.body.style.fontSize = "16px"; richTextFeld.document.body.style.color = "#ff0000"; richTextFeld.document.body.innerHTML = "Some Text"; } </script>Realmente no entiendo por qué la fuente de abajo no funciona, ¿tienes una idea?
Editar: en el inspector, Raleway se muestra como fuente, pero la fuente que se muestra en el sitio es diferente (vea la imagen a continuación). Imagen
Así es como puedes cambiar la fuente:
<iframe id="textBox" name="iFrameName"></iframe>Importar una fuente:
iFrameName.document.body.innerHTML = "<style>@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');*{font-family:'Raleway',sans-serif;}</style>Some Text";Usar una fuente instalada:
iFrameName.document.body.fontFamily = "Arial";