Google Fonts API и Polymer: проблемы с CORS

Недавно я играл с Polymer и, наконец, я думаю, что у меня есть голова вокруг границы тени, по крайней мере, до Насколько я знаю, где мне нужно включить теги ссылок, чтобы мой CSS работал.

Это прекрасно и модно, но я не могу использовать шрифты Google. Если я использую @import внутри своей таблицы стилей, то, как только эта таблица стилей будет включена в пользовательский элемент Polymer, у меня возникнут проблемы с CORS:

XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Maven+Pro:400,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64000' is therefore not allowed access

Здесь задействован XMLHttpRequest, вероятно, из-за того, как Polymer извлекает ресурсы и пользовательские элементы в первую очередь, что, я полагаю, удаляет заголовок, упомянутый в сообщении об ошибке.

Однако, если я использую только метод ссылки

<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>

Это не пересекает границу тени, и я все еще не получаю свои шрифты.

Я упускаю что-то очевидное? Как мне получить шрифты Google внутри теневого DOM? Я попытался загрузить zip-файл из самого Google Fonts, но получил только файлы TTF.


google-font-api webfonts polymer
person Altreus    schedule 22.07.2014    source источник
comment
Обратите внимание, что я не могу воспроизвести проблему с методом ссылки — я думаю, это то, что происходит, когда вы позволяете своему мозгу немного расслабиться. Однако принятый ответ действительно полезен, поэтому я оставил его для других.   -  person Altreus    schedule 23.07.2014

Ответы (1)


arrow_upward
7
arrow_downward

Что мы обычно делаем со шрифтами в команде Polymer, так это создаем импорт HTML, который загружает шрифт(ы), и включаем этот импорт в качестве зависимости в импорт вашего элемента. Это помещает определения шрифтов в основной документ (чтобы они могли использоваться любыми компонентами), но также гарантирует, что шрифты будут доступны в теневой части вашего элемента.

Вот простой пример: http://jsbin.com/cefawali/1/edit.

Мы делаем это с помощью шрифта RobotoDraft. Вот импорт: https://github.com/Polymer/font-roboto/blob/master/roboto.html

другой подход заключается в использовании no-shim и @import:

<polymer-element>
<template>
 <style no-shim>
    @import url('http://fonts.googleapis.com/css?family=Maven+Pro:400,700');
 </style>
...

Примечание В настоящее время существует ошибка, препятствующая работе этого последнего подхода.

person ebidel    schedule 22.07.2014
comment
После некоторого количества возни я не могу воспроизвести исходную проблему. Это работает, если я использую ссылку в собственной голове документа! Тем не менее, это, безусловно, хороший совет - и как только no-shim снова заработает, я думаю, что это будет хороший способ снова правильно разделить CSS и разметку. Очень благодарен. - person Altreus; 23.07.2014
comment
Возможно, по-прежнему полезно использовать импорт HTML, чтобы компоненты могли явно объявить его как зависимость, при этом по-прежнему используя дедуплинг. - person CletusW; 23.07.2014