html - 字体未正确呈现

标签 html css fonts styles

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

相关文章:

javascript - HTML 在 JavaScript 中显示值 "data"

Python Pyglet 使用外部字体作为标签

javascript - 从槽范围获取数据

php - jQuery .show() 在刷新之前不起作用

html - 使用 HTML+CSS 的 iPhone 6 登陆页面

html - iframe 滚动条在 Mac 上的 Chrome 中消失

html - 使 html 表格元素响应水平滚动

jquery - 我的 Stack Slider 文本变得模糊,导航也没有循环

如果使用右边距,Android 一行的最后一个字可能会导致不正确的 TextView 尺寸

fonts - Ean 13 字体无法从扫描仪读取