Fatal编程技术网
  • html/
  • Html 字体渲染不正确

Html 字体渲染不正确

html css fonts

Html 字体渲染不正确,html,css,fonts,styles,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>

我对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>
标题内的文本以正确的样式显示，但是段落内的文本显示不正确。看起来它无法识别给定的样式。 它显示右侧的
字体系列
，但不识别
字体重量

我做错了什么？我需要一些帮助

谢谢你链接：

正如您所看到的，“Light 300 Italic”或“Extra Bold 800”等字体样式。您必须为粗体或浅色字体选择该样式。然后你可以在css中使用字体权重，否则它就不起作用了。
别忘了：当你选择“light 300”时，你可以使用字体重量：300。所以字体的重量：200是没有任何区别的。如果你选择了太多的字体样式，那么在打开页面时从谷歌加载字体会花费更多的时间。您可以在右侧看到性能指示器。

您的
链接
标签应该如下所示

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
您可以使用
font-weight
属性选择所需的字体样式

Font weight 400和normal是一回事，因此即使您包含了正确的字体权重（根据@IbrahimAlkan的回答），您也不会看到它们之间有任何区别。不要使用
font-style:Light
，而是使用
font-weight:300
，不幸的是，这不起作用。标题中的文字变得有点粗。当我在我的页面标记中定义
时，标题显示了正确的样式，但是段落仍然没有正确的样式。基本上，看起来，段落采用了页眉使用的样式。如果我从googlefonts定义中删除300，标题中的文本将变厚，段落将显示正确的样式。您的
链接
标记应类似于
。你需要400和300。谢谢你的朋友，你很好。你可以看到关于字体渲染不正确的帖子。 
<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;          
}