Google Fonts API和Polymer:CORS问题

Question

我最近一直在和Polymer一起玩,最后我认为我的头围绕着阴影边界,至少在某种程度上我知道我需要包含链接标签以使我的CSS工作.

这很好,花花公子,但我不能使用谷歌字体.如果我@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'>

这不会越过阴影边界,我仍然没有得到我的字体.

我错过了一些明显的东西吗 如何在shadow DOM中获取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

的另一种方法是使用no-shim和使用@import:

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

注意目前有一个错误阻止后一种方法工作.