如何在 React 的 window.open 中使用 Google 字体

Question

我有一个 React 应用程序，在 onClick 处理程序中打开了一个 window。然后，我通过以下方法向 window 添加文本和样式：

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<html><head><style>CUSTOM CSS STYLES HERE</stye></head><p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p></html>")

虽然这适用于传统 CSS，但如果我想添加从 Google 字体下载的自定义字体类型，window 将无法识别该字体。同样，向头部添加样式表 link 似乎不起作用，因为 window 没有引用 React 样式表。

在这种情况下，如何使用 window.open 通常不可用的 Google？

我知道有一个用于打开 windows 的 React 包，但我想避免这种情况。

Answer 1

这样就可以了

var myWindow = window.open("", "MsgWindow", "width=200,height=100");

myWindow.document.write("<html><head><link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <style>body {font-family: 'Roboto', sans-serif;}</stye></head><p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p></html>")

Answer 2

如果您也想在基本应用程序页面中使用它，您可以将它们添加到 index.html head 部分本身：

<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro" rel="stylesheet">

现在，在您的应用程序/弹出窗口的任何位置，只需将其添加到 font-family 属性中，如下所示：

font-family: 'Source Serif Pro', serif;

如何在 React 的 window.open 中使用 Google 字体

How to use Google fonts in a window.open in React

javascript

html

css

reactjs

google-font-api