PhantomJS рендеринг шрифтов

Question

Может ли PhantomJS визуализировать шрифт TrueType, встроенный в веб-страницу? У меня есть CSS, как этот

@font-face { 
font-family: 'Roboto'; 
font-style: normal; 
font-weight: normal; 
src: local('Roboto-Regular.ttf'), url('Roboto-Regular.ttf') format('truetype'); 
} 

Answer 1

Ответ: «это зависит». Phantomjs, как «безголовый» браузер, похож на любой другой браузер, поскольку он может отображать только такие шрифты, как выше, если этот шрифт установлен в системе, выполняющей рендеринг. Если у меня есть Roboto, установленный на моей машине, когда я попаду на вашу веб-страницу, тогда я увижу Roboto, как ожидалось. Если, однако, у меня нет Roboto, установленного на моей локальной машине, он будет отображать любой используемый по умолчанию резервный шрифт, который использует мой браузер.

Phantomjs более чем способен отображать шрифты Google, такие как Roboto, если вы загружаете их в качестве внешних шрифтов, связанных с сторонним сайтом. Или, еще лучше, используйте https://github.com/typekit/webfontloader, который сделает тяжелый подъем загрузочных веб-сайтов для вас.

Начиная с версии Phantomjs 2.0, phantomjs может отображать «websafe» шрифты. Однако это снова будет зависеть от того, установлены ли эти шрифты на рассматриваемой машине. Если, например, ваш веб-сервер работает под Linux, у вас могут быть проблемы. Это связано с тем, что шрифты «websafe» на самом деле являются шрифтами Microsoft и лицензированы для использования такими операционными системами, как Windows и OSX. Такие шрифты не обязательно устанавливаются в других операционных системах и, возможно, их необходимо установить вручную, как описано here.

Answer 2

поскольку верхний колонтитул и содержание заголовка разделены, вам нужно включить шрифты в каждую часть.

пожалуйста, следовать примеру и получить результат шрифта в заголовке вашего

добавить это в заголовке:

"<style> "+ 
         "@font-face {"+ 
         " format('ttf'); "+ 
         "font-family: 'Open Sans'; "+ 
         "font-style: normal; "+ 
         "font-weight: 400; "+ 
         "src: url(" + url + "/fonts/Open_Sans/OpenSans-Regular.ttf) format('truetype');"+ 
         "} " + 
       "* { font-family: 'Open Sans'; } </style > " 

параметр URL является определить с пути phantomjs.exe работает, и вы объявляете она с:

url = 'file:///' + fs.absolute('./'); 

должен работать в заголовке,

надеюсь, что это поможет кому-либо