Google 字体：在 CSS 中定义自定义名称

Question

是否可以为 Google 字体定义自定义名称？

例如。 <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

如何使用自定义名称的“Open Sans”？

div {
   font-family: 'custom'; // to be same as 'Open Sans'
}

使用这里的@font-face回答是不可能的，因为我不必源文件（ttf、eot、woff，...）。url

指向 Google 上源文件的链接cdn将解决此问题。

Answer 1

此代码适用于您的情况：

<style type="text/css">
@font-face {
    font-family: 'MyCustomOpenSans';
    font-style: normal;
    font-weight: 400;
    src: 
        local('Open Sans'), 
        local('OpenSans'), 
        url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), 
        url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
p {font-family: "MyCustomOpenSans", sans-serif;}
</style>

我不确定它是否足够稳定，因为如果字体有新的更新，URL 将会改变，而且我不确定 Google 是否会禁止访问其他 URL。

编辑：

WOFF 格式支持 IE9+、Firefox、Chrome 等。来源：http ://caniuse.com/#feat=woff

WOFF2 格式支持较少： http://caniuse.com/#search=woff2