Question

我正在尝试使用以下代码将字体字体的CSS手动添加到新窗口：

const css = '@font-face {font-family:Roboto; src:url("assets/fonts/Roboto-Black.ttf");}';
const head = this.externalWindow.document.getElementsByTagName('head')[0];
const style = this.externalWindow.document.createElement('style');
style.type = 'text/css';
style.appendChild(this.externalWindow.document.createTextNode(css));
head.appendChild(style);

执行此操作时，似乎无法将CSS识别为CSS，甚至在源代码中也未将其突出显示为CSS。

但是当我这样做并使用document.write编写样式时，它可以正常工作并将字体加载为字体。

this.externalWindow.document.write('<html><head><style>' + '@font-face {font-family:Roboto ;src:url("assets/fonts/Roboto-Black.ttf");}' + '.inner{font-family: Roboto;font-size: 40pt;text-align: justify;}' + '</style></head><body onload="window.print();window.close()"><p class="head">' + this.headContents + '</p> <p class="inner">' + this.innerContents + '</p> <p class="sign">' + this.signContents + '</p></body></html>');

Answer 1

您可以：

向<style>

externalWindow.document

然后从该stylesheet元素中抓取<style>对象
然后使用stylesheet

insertRule

示例：

// Append <style> element to <head> of externalWindow.document
const head = this.externalWindow.document.head;
const style = this.externalWindow.document.createElement('style');
head.appendChild(style);


// Grab external stylesheet object
const externalStylesheet = style.sheet;


// Insert style rules into external stylesheet
externalStylesheet.insertRule('@font-face {font-family: Roboto; src: url("assets/fonts/Roboto-Black.ttf");}', 0);
externalStylesheet.insertRule('.inner {font-family: Roboto; font-size: 40pt; text-align: justify;}', 1);

Answer 2

.createTextNode假定您输入的内容是文本，而不是代码，并因此进行了转义（MDN）。

相反，请尝试使用style.innerHTML = css。

使用appendChild附加CSS到文档无法正常工作

2 个答案: