Question

我对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。

我在这里做错了什么？需要一些帮助。

谢谢

Answer 1

链接：https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

正如你所看到的，有＃34; Light 300 Italic＆＃34;等字体的样式。或＆＃34; Extra-Bold 800＆＃34;。您必须为较粗或较轻的字体选择该样式。然后你可以在CSS中使用font-weight，否则它不起作用。别忘了：当你选择＆＃34;灯300＆＃34;你可以使用font-weight：300。所以font-weight：200没有任何区别。如果选择太多字体样式，打开页面时从谷歌加载字体需要更多时间。您可以在右侧看到效果指标。

Answer 2

您的link标记应该是

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

您需要在网址中包含所需的每个字体粗细。

你的风格应该是：

article h1
{
    color: #0140be;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;   
}

article p.txtDesc
{
    line-height:1.6;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin-left: 18px;
    font-weight: 400;          
}

使用font-weight属性选择所需的字体样式。

JSFiddle

字体未正确呈现

2 个答案: