Question

我有一个React应用，并在onClick处理程序中打开一个窗口。然后，通过以下方法将文本和样式添加到此窗口：

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字体下载的自定义字体类型，则该窗口将无法识别该字体。类似地，将样式表链接添加到头部似乎无法正常工作，因为窗口没有引用React样式表。

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

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

Answer 1

这可以解决问题

PS C:\Users\xxxx> Get-Module -Name AzureRM -ListAvailable
Directory: C:\Program Files\WindowsPowerShell\Modules
ModuleType Version    Name                                ExportedCommands                                                     

---------- -------    ----                                ----------------                                                                 

Script     6.13.1     AzureRM                                                                                                          

Script     5.4.1      AzureRM                                                                                                              

$PSVersionTable.PSVersion
Major  Minor  Build  Revision
-----  -----  -----  --------
5      1      14409  1005

Answer 2

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

<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字体

2 个答案: