JS: window.open - как установить шрифт Open Sans?

Я не могу заставить его работать. Единственное, что мне нужно - установить все семейство шрифтов содержимого на 'Open Sans'. Вот что у меня есть прямо сейчас

        var popupWin = window.open('', '_blank', 'width="100%",height="100%"');
        popupWin.document.write('<html><head><link href=\'http://fonts.googleapis.com/css?family=Open+Sans\' rel=\'stylesheet\' type=\'text/css\'></head><body>' + content + '</body></html>');
        popupWin.document.body.setAttribute('style', 'font-family: \'Open Sans\' !important');
        popupWin.document.close();
        popupWin.print();
        popupWin.close();
    }

Этот фрагмент кода показывает пустую страницу, но когда я удаляю атрибут link, содержимое отображается, но с семейством по умолчанию. Любые идеи?

P.S. переменная содержимого содержит простую html-разметку, я пытался установить стиль, например

<div style="font-family='Open Sans'">

но не повезло.


javascript printing font-family
person Lunin Roman    schedule 16.08.2017    source источник
comment
Вы открываете страницу с вкладки HTTPS? Если это так, браузер заблокирует ваш запрос на http://..... Попробуйте удалить протокол href=\'//fonts.googleapis.com/css?family=Open+Sans\'   -  person DrColossos    schedule 16.08.2017
comment
Да, я использую HTTPs, но как мне удалить протокол, Open Sans не является стандартным шрифтом, я должен загрузить его   -  person Lunin Roman    schedule 16.08.2017
comment
В комментарии показано, как это сделать. Просто удалите http: (сохраните косую черту) в начале атрибута href.   -  person Phylogenesis    schedule 16.08.2017
comment
Это дает мне просто пустой экран, содержимое не отображается   -  person Lunin Roman    schedule 17.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Измените http на https. Вы также можете добавить задержку перед печатью. Попробуйте следующее:

document.querySelector('button').onclick = function() {
  var content = document.querySelector('textarea').innerHTML;

  var popupWin = window.open('', '_blank', 'width="100%",height="100%"');
  // Popup locked by browser
  if (!popupWin) {
    console.log('Popup was blocked');
    return false;
  }
  popupWin.document.write('<html><head><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"></head><body>' + content + '</body></html>');
  popupWin.document.body.setAttribute('style', 'font-family: "Open Sans" !important');
  setTimeout(function() {
    popupWin.document.close();
    popupWin.print();
    popupWin.close();
  }, 2000);
};
<h1>Test</h1>
<textarea>Put this on the popup page</textarea>
<button>Print</button>

person styfle    schedule 16.08.2017
comment
Странно, но проблема исчезла только после добавления задержки, можете объяснить почему? - person Lunin Roman; 17.08.2017
comment
Я думаю, что функция печати не ждет загрузки ресурсов. - person styfle; 17.08.2017
comment
@styfle: Вы имели в виду это? if (!popupWin) { - person Brian Dant; 11.12.2019