webfonts - 谷歌字体 API 和 polymer : CORS issues

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 首先获取资源和自定义元素的方式，我想这会删除错误消息中提到的 header 。

但是，如果我只使用链接方法

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

这不会跨越阴影边界，我仍然没有得到我的字体。

我错过了一些明显的东西吗？如何在 shadow DOM 中获取 Google 字体？我尝试从 Google Fonts 本身下载 zip 文件，但我只有 TTF 文件。

Answer 1

我们在 Polymer 团队中通常对字体所做的是创建一个 HTML 导入来加载字体，并将该导入作为依赖项包含在元素的导入中。这会将字体定义放在主文档中(因此它们可以被任何组件使用)，但也保证字体将在元素的 shadow dom 中可用。

这是一个简单的例子:http://jsbin.com/cefawali/1/edit

我们使用 RobotoDraft 字体来做到这一点。这是导入:https://github.com/Polymer/font-roboto/blob/master/roboto.html

other approach是使用 no-shim并使用 @import :

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

备注 当前有一个 bug阻止后一种方法起作用。