导入 google 字体时是否需要权重?
Are weights necessary when importing google fonts?
一些 google 字体导入如下所示:
@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;
}
是的,如果你想使用它们,它们是必需的。
如果你直接做下面的URL(你拿来举例)。
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;
}
[...]
如果您没有在 URL 末尾指定粗细,如果您尝试使用该字体并设置自定义粗细(除 400) 然后它会回退到默认粗细,字体不会改变。
因此,如果您打算只使用 400 粗细,则保留它们,但如果您还想使用细粗体,则需要将它们包含在 URL 中。不过,包括额外的粗细会增加字体加载时间,因此请只包括您打算使用的内容。
一些 google 字体导入如下所示:
@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;
}
是的,如果你想使用它们,它们是必需的。
如果你直接做下面的URL(你拿来举例)。
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;
}
[...]
如果您没有在 URL 末尾指定粗细,如果您尝试使用该字体并设置自定义粗细(除 400) 然后它会回退到默认粗细,字体不会改变。
因此,如果您打算只使用 400 粗细,则保留它们,但如果您还想使用细粗体,则需要将它们包含在 URL 中。不过,包括额外的粗细会增加字体加载时间,因此请只包括您打算使用的内容。