Google 글꼴 API 및 Polymer : CORS 문제

Question

최근에 Polymer으로 놀았으며 마침내 그림자 경계 주변에 머리가 있다고 생각합니다. 적어도 내가 링크 태그를 포함 시켜서 CSS 작업.

괜찮 으면 좋겠지 만 Google 글꼴을 사용할 수 없습니다. 내 스타일 시트 내부에 @import를 사용하는 경우, 즉시 그 스타일 시트는 고분자 사용자 정의 요소에 포함되어 나는이 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를있다 처음에는 오류 메시지에 언급 된 헤더를 axing하는 것입니다. 난 단지 링크 방법

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

를 사용하는 경우

그러나,이 그림자의 경계를 교차하지 않으며, 난 여전히 내 글꼴을하지 않습니다.

나는 분명한 뭔가를 놓치고 있습니까? 그림자 DOM 내부에서 Google 글꼴을 얻으려면 어떻게해야합니까? Google 글꼴 자체에서 zip 파일을 다운로드하려고했지만 TTF 파일 만 가져 왔습니다.

Answer 1

일반적으로 Polymer 팀의 글꼴과 관련된 작업은 글꼴을로드하는 HTML 가져 오기를 작성하고 가져 오기를 요소 가져 오기의 종속 항목으로 포함시키는 것입니다. 이렇게하면 글꼴 정의가 주 문서에 저장되므로 (모든 구성 요소에서 사용할 수 있도록) 요소의 그림자 DOM에서 글꼴을 사용할 수 있습니다. http://jsbin.com/cefawali/1/edit

우리는 RobotoDraft 글꼴로이 작업을 수행 :

여기에 빠른 예입니다. 여기 가져 오기는 다음과 같습니다 https://github.com/Polymer/font-roboto/blob/master/roboto.html

other approach는 @import을 no-shim을 사용하고 사용하는 것입니다 작동이 후자의 접근을 방지 현재 bug을있다

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

참고.