Question

我不确定我在这里做错了什么？我正在尝试创建常规字体的粗体变体，但似乎总是只使用匹配字体系列中最后定义的font-face。有什么想法吗？

<style>
@font-face {
  font-family: ProofMedium;
  src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}

@font-face {
  font-family: ProofMedium;
  src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
  font-weight: "bold"; }

@font-face {
    font-family: ProofMedium2;
    src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
  }

body{
  font-family:ProofMedium, san-serif;
}
.test{
  font-family:ProofMedium2, san-serif;
}
</style>
<body>
testing <b>testing</b> <span class="test">testing</span>
</body>

编辑：我正在使用chrome

Answer 1

请从div font-weight：normal;。

中删除内联样式

＆＃13;

<style>
@font-face {
  font-family: "ProofMedium";
  src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
  font-weight: "normal"; }
@font-face {
  font-family: "ProofMedium";
  src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
  font-weight: "bold"; }

body{
  font-family:"ProofMedium", san-serif;
}
</style>
<div>testing</div>

＆＃13;

Answer 2

@font-face {
  font-family: ProofMedium;
  src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}

@font-face {
  font-family: ProofMedium;
  src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
  font-weight: "bold";
}

@font-face {
  font-family: ProofMedium2;
  src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}

body {
  font-family: ProofMedium, san-serif;
}

.test {
  font-family: ProofMedium2, san-serif;
  font-weight: bold;
}

testing <b>testing</b> <span class="test">testing</span>

Answer 3

   @font-face {
      font-family: "ProofMedium";
      src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf")format("truetype");
      font-weight: "normal"; 
    }
 @font-face {
      font-family: "ProofMedium-1";
      src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf")format("truetype");
      font-weight: "normal"; 
}
 @font-face {
  font-family: "ProofMedium-2";
  src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
  font-weight: "bold"; 
}

         body    {font-family: "ProofMedium", san-serif;}
  p.ProofMedium-1{font-family: "ProofMedium-1";}
  p.ProofMedium-2{font-family: "ProofMedium-2";}


<p class="ProofMedium-1">i am ProofMedium-1</p>
<p class="ProofMedium-1">i am ProofMedium-2</p>

使用上面的不同字体系列名称

Answer 4

在CSS中，内部和外部CSS的优先级最高。您定义为内联CSS的内容不会被任何外部或内部CSS覆盖。既然你提到了font-weight: normal，那只是被执行了。所以如果你删除它应该有用。

奖励：不要混淆。如果您使用的是外部/内部CSS，请仅遵循该标准。将它们与内联CSS混合只会造成混淆在CSS中，如果@ font-face有多个定义，则将执行最后一个定义并覆盖之前的定义。

Go through specificity in css

<style> @font-face {
  font-family: "ProofMedium";
  src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
  font-weight: "normal";
}

@font-face {
  font-family: "ProofMedium";
  src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
  font-weight: "bold";
}

body {
  font-family: "ProofMedium", san-serif;
}

</style> 
<div>testing</div>

Answer 5

请尝试以下方法：

<style>
  @font-face {
    font-family: "ProofMedium";
    src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: "ProofMedium";
    src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
  }
  body {
    font-family: "ProofMedium", san-serif;
  }
  .font_medium {
    font-weight: 500;
  }
  .font_bold {
    font-weight: 700;
  }
</style>
<p class="font_medium">text</p>
<p class="font_bold">text</p>

Answer 6

我通过更改

来解决问题

$select = $this->tableGateway->getSql()->select();

// here is the catch
$predicate = new  \Zend\Db\Sql\Where();

$select->where(['category' => $this->category]);

// now use thus
$DBtimeNow = new \DateTime();
$select->where($predicate->lessThanOrEqualTo("created", $DBtimeNow->format('Y-m-d H:i:s')), 'AND');
$DBtimeNow->sub(new DateInterval('P1D'));
$select->where($predicate->greaterThanOrEqualTo("created", $DBtimeNow->format('Y-m-d H:i:s')), 'AND');

$select->order('id Desc');
$select->limit($this->limit);

$resultSet = $this->tableGateway->selectWith($select);

到

font-weight: "bold";

我很惊讶引号很重要，但显然他们确实如此。

@ font-face variant用作默认值

6 个答案: