导入谷歌字体时是否需要权重?

时间:2017-03-23 20:07:56

标签: css css3 google-font-api

一些谷歌字体导入如下所示:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900);

是否需要400, 100, 900权重?

或者可以像这样执行导入:

@import url(http://fonts.googleapis.com/css?family=Roboto);

将元素设置为这样:

element {
    font-weight: 900;
    font-family: Roboto;

}

1 个答案:

答案 0 :(得分:3)

,如果您想使用它们,则需要它们。

如果您直接访问以下网址(您用作示例的)。

http://fonts.googleapis.com/css?family=Roboto

你会看到类似的东西......

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

但是如果你为它添加权重,你会看到这个...

[...]

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

[...]

如果您未在网址末尾指定权重,如果您尝试使用该字体并设置自定义权重( 400以外的其他任何内容),那么它只会后退到默认权重,字体不会改变。

因此,如果您打算仅使用400重量,那么请保留它们,但如果您还想使用精简版和粗体版,则需要将它们包含在URL中。包括额外的权重会增加字体加载时间,因此只包括您打算使用的内容。