我对 css 有一点经验,并且每天都在学习它,但我需要弄清楚这一点。
我在定义页面样式时遇到了一点问题。
我的页面包含以下部分:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
我有包含以下部分的 .css
文件:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
标题内的文本以正确的样式显示,但是段落内的文本显示不正确。看起来它没有识别给定的样式。
它显示正确的 font-family
,但无法识别 font-weight
。
我在这里做错了什么?需要一些帮助。
谢谢
最佳答案
链接:https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
如您所见,有“Light 300 Italic”或“Extra-Bold 800”等字体样式。您必须为更粗或更浅的字体选择该样式。然后你可以在 css 中使用 font-weight 否则它不起作用。 不要忘记:当您选择“light 300”时,您可以使用 font-weight:300。所以 font-weight:200 没有任何区别。如果您选择了太多的字体样式,那么在打开您的页面时从谷歌加载字体会花费更多的时间。您可以在右侧看到性能指标。
关于html - 字体未正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25534789/