这是我的问题:
为了提高我在Google速度分析上的SPEED标记,我不得不从阻止渲染的Google字体切换到加载的本地Google字体。
到目前为止一切都很好,除了我有一个很大的问题。
在以这种方式加载字体之前:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300|Ubuntu+Condensed|Ubuntu:300,700" rel="stylesheet">
在我巨大的样式表中,我只是正常地称它们为例如:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
但是现在,由于必须下载它们以避免呈现阻塞的红色标记,因此我以这种方式调用它们:
@font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
@font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Bold.ttf");
font-weight: 600;
}
@font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-ExtraBold.ttf");
font-weight: 700;
}
@font-face {
font-family: "Opens Sans Condensed";
src: url("/fonts/OpenSansCondensed-Light.ttf");
font-weight: 300;
}
@font-face {
font-family: "Ubuntu Condensed";
src: url("/fonts/UbuntuCondensed-Regular.ttf");
font-weight: 300;
}
@font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Regular.ttf");
font-weight: 300;
}
@font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Bold.ttf");
font-weight: 700;
}
在这里您可以看到我的问题。
我用相同的名称称呼不同的字体,但是它们具有不同的粗细。显然,我可以使用不同的名称来称呼它们,例如“ Ubuntu Bold”,但是随后我将不得不更改整个样式表,例如,我现在应该声明:
body {
font-family: 'Open Sans Normal', sans-serif;
// font-weight: 400; //
}
p {
font-family: 'Open Sans Bold', sans-serif;
// font-weight: 700; //
}
本质上,没有更多的字体粗细,只有不同的字体家族名称来说明粗细。
我的问题有什么解决办法吗?
即使字体文件不同,也不需要font-family
为每种字体设置不同的字体。您可以只设置一个font-family
,然后在不同的@font-face
属性中指定不同的变体。
您应该@font-face
使用相同的font-family
名称定义每个名称,如下所示:
@font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Italic.ttf");
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Bold.ttf");
font-style: normal;
font-weight: 600;
}
请注意,每个不同的字体文件都有一个单独的@font-face
属性,这些属性与特定的字体文件相对应,但是它们具有相同的font-family
。然后,您可以像这样在CSS中使用字体:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.bold {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.italic {
font-family: 'Open Sans', sans-serif;
font-style: italic;
}
在你的CSS类(其他属性font-weight
,font-style
等等)将确定@font-face
被使用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句