Question

我希望我的字体粗体像这个website h2元素的标题一样我正在使用下面的css我尝试了所有的东西，但我的网站上的h2元素的字体重量仍然是粗体然后这个

CSS：

h2 {
 color: #2598ea;
 font: normal normal 300 38px / 51px "Open Sans", Calibri, Helvetica, Arial, Verdana, sans- serif;
 text-transform: none;
}

我真的不知道这段代码有什么问题

Answer 1

回到基础这里我认为更多的是问题。你有从谷歌字体加载正确的字体重量？当您从中选择您喜欢的字体时，请确保选择适当的字体粗细。

如果没有确保使用以下代码将其放入html头部。

检查我的代码笔以了解如何执行此操作。

Codepen：http://codepen.io/Travo100/pen/rdLmG

<!-- font-weight of 300 included here -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<h2> Welcome to Ardent Engineers </h2>

h2{
  color: #2598ea;
  /*font weight of 300 here*/
  font: normal normal 300 38px / 44px "Open Sans", Helvetica, Arial, Verdana, sans-serif;
  text-transform: none;
 }

Answer 2

使用！important添加普通类的属性。所以它总是适用。

CSS: 
h2
{
    color: #2598ea;
    font: normal normal 300 38px / 51px "Open Sans", Calibri, Helvetica, Arial, Verdana,    sans-serif;text-transform: none; 
    font-weight : normal !important ;
}

但我认为你可以为普通字体添加新类并明确地赋予该对象。

<h2 class="normalfnt" ...>
    .normalfnt
    {
            font-weight : normal !important ;  
    }

Answer 3

那不是系统字体。字体本身，它提出了风格。基本上我们的系统字体会非常大胆，如果你给38px。在你的情况下，它采用系统字体，并按原样应用。如果你给Bold它会在正常文本中添加更多粗体。

假设您在系统中安装了相同的字体“Open Sans”，您将得到相同的结果。

Answer 4

我认为您可能会将系统字体与网络字体混淆。在这种情况下，您链接的网站已加载字体的正常/罗马字母切割以及粗体剪切。在@font-face声明中，您可以为不同的文件设置不同的权重。

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-bold-webfont.eot');
    font-weight: normal;
    font-style: bold;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-roman-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

这两个链接到不同的文件，但当CSS规则指定bold时，使用第一个声明。指定normal时，将使用第二个。

在您的示例中，您需要使用字体的轻微切割来获得更轻的字体。

将font-weight设置为100后，Text Font仍然是粗体

4 个答案: