Google字体：在CSS中定义自定义名称 [英] Google fonts: Define custom name in CSS

问题描述

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

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

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

  div {
 font-family：'custom'; //与Open Sans相同
} 
  

使用 @ font-face 如回答这里是不可能的，因为我没有 url 到源文件（ttf，eot，woff，...） p>

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

解决方案

此代码将在您的情况下工作：

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

我不确定它是否足够稳定，因为如果有一个新的更新

编辑：

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

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

Is it possible to define a custom name for Google fonts?

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

How to use 'Open Sans' with custom name?

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

Using @font-face as answered here is not possible, since I don't have url to source files (ttf, eot, woff, ...).

Links to source files on Google cdn would solve this issue.

解决方案

This code will work in your case:

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

I'm not sure if it's a stable enough because the URL will change if there's a new update to the font and I'm not sure if Google will ban access to the other URL.

EDIT:

The WOFF format is supported by IE9+, Firefox, Chrome etc. Source: http://caniuse.com/#feat=woff

The WOFF2 format is less supported: http://caniuse.com/#search=woff2

这篇关于Google字体：在CSS中定义自定义名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！