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 作为回答 here 是不可能的，因为我没有 url 源文件（ttf、eot、woff、...）。

Google cdn 上的源文件链接可以解决这个问题。

Answer 1

您可以下载字体并使用 @font-face {}

为其提供您自己的名称

使用a font converter转换字体。

然后像这样更改字体名称...

@font-face {
  font-family: 'super-wicked-font-yeahhh'; /* CHANGE HERE */
  src: url('fontawesome/fontawesome-webfont.eot');
  src: url('fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontawesome/fontawesome-webfont.svg#svgFontName') format('svg'),
     url('fontawesome/fontawesome-webfont.woff') format('woff'), 
     url('fontawesome/fontawesome-webfont.ttf')  format('truetype');
}

然后调用字体使用：

p {
  font-family: super-wicked-font-yeahhh;
}

Answer 2

此代码适用于您的情况：

<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.

编辑：

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

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

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

Google fonts: Define custom name in CSS

css

fonts

webfonts

font-face

google-font-api