Как использовать Google шрифты в window.open в React - PullRequest
Новая
       49

Как использовать Google шрифты в window.open в React

0 голосов
/ 19 декабря 2018

У меня есть приложение 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 Fonts, окно не будетраспознать шрифтТочно так же добавление ссылки на таблицу стилей в заголовок не работает, по-видимому, потому что окно не имеет ссылки на таблицы стилей React.

Как я могу использовать Google, который обычно не доступен в window.open в таких ситуациях?

Я знаю, что есть пакет React для открытия окон, но я хотел этого избежать.

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Если вы хотите использовать его и на страницах базовых приложений, вы можете добавить их в самом разделе заголовка index.html: 

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

Теперь в любом месте вашего приложения / всплывающего окна просто добавьте его вАтрибут font-family выглядит следующим образом: 

font-family: 'Source Serif Pro', serif;
0 голосов
/ 19 декабря 2018

Это бы сработало 

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>")
...