Html @字体面变量用作默认值_Html_Css

Html @字体面变量用作默认值

html css

Html @字体面变量用作默认值,html,css,Html,Css,我不确定我做错了什么？我正在尝试创建一个常规字体的粗体变体，但它似乎总是使用匹配字体系列中最后定义的字体。有什么想法吗 <style> @font-face { font-family: ProofMedium; src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype"); } @font-face { font-family: ProofMedium; src: url("/f

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

<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>


@字体{
字体系列：校对介质；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
}
@字体{
字体系列：校对介质；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；}
@字体{
字体系列：校对媒体2；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
}
身体{
字体系列：校对介质，圣衬线；
}
.测试{
字体系列：ProofMedium2，圣衬线；
}
测试

编辑：我正在使用chrome

请从div字体中删除内联样式。字体大小：normal


@字体{
字体系列：“校对介质”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；}
@字体{
字体系列：“校对介质”；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；}
身体{
字体系列：“校对介质”，圣衬线；
}
测试

请从div字体重量中删除内联样式：normal


@字体{
字体系列：“校对介质”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；}
@字体{
字体系列：“校对介质”；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；}
身体{
字体系列：“校对介质”，圣衬线；
}
测试字体{
字体系列：“校对介质”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；
}
@字体{
字体系列：“ProofMedium-1”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；
}
@字体{
字体系列：“ProofMedium-2”；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；
}
正文{字体系列：“ProofMedium”，圣塞里夫；}
p、 ProofMedium-1{字体系列：“ProofMedium-1”；}
p、 ProofMedium-2{字体系列：“ProofMedium-2”；}
我是ProofMedium-1
我是ProofMedium-2

使用上述类似于不同字体的系列名称

@font-face{
字体系列：“校对介质”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；
}
@字体{
字体系列：“ProofMedium-1”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；
}
@字体{
字体系列：“ProofMedium-2”；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；
}
正文{字体系列：“ProofMedium”，圣塞里夫；}
p、 ProofMedium-1{字体系列：“ProofMedium-1”；}
p、 ProofMedium-2{字体系列：“ProofMedium-2”；}
我是ProofMedium-1
我是ProofMedium-2

在CSS中使用上述类似于不同字体的系列名称比内部和外部CSS具有最高的优先级。您定义为内联CSS的内容不会被任何外部或内部CSS覆盖。因为您提到了

font-weight:normal

，所以这只是在执行。所以，如果你移除它，它应该会起作用

好处：不要把事情搞混了。如果您使用外部/内部CSS，请仅遵循该标准。将它们与内联CSS混合只会造成混乱。
在CSS中，如果有@font-face的多个定义，将执行最后一个定义并覆盖以前的定义

@font-face{
字体系列：“校对介质”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；
}
@字体{
字体系列：“校对介质”；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；
}
身体{
字体系列：“校对介质”，圣衬线；
}
CSS中的测试比内部和外部CSS具有最高的优先级。您定义为内联CSS的内容不会被任何外部或内部CSS覆盖。因为您提到了font-weight:normal
，所以这只是在执行。所以，如果你移除它，它应该会起作用
好处：不要把事情搞混了。如果您使用外部/内部CSS，请仅遵循该标准。将它们与内联CSS混合只会造成混乱。

在CSS中，如果有@font-face的多个定义，将执行最后一个定义并覆盖以前的定义


@font-face{
字体系列：“校对介质”；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
字体大小：“正常”；
}
@字体{
字体系列：“校对介质”；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；
}
身体{
字体系列：“校对介质”，圣衬线；
}
测试
@font-face{
字体系列：校对介质；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
}
@字体{
字体系列：校对介质；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；
}
@字体{
字体系列：校对媒体2；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
}
身体{
字体系列：校对介质，圣衬线；
}
.测试{
字体系列：ProofMedium2，圣衬线；
字体大小：粗体；
}
测试
@font-face{
字体系列：校对介质；
src:url（“/font/proofmedia/proofmedia Regular.ttf”）格式（“truetype”）；
}
@字体{
字体系列：校对介质；
src:url（“/font/ProofBold/ProofBold Regular.ttf”）格式（“truetype”）；
字体大小：“粗体”；
}
@字体{
字体系列：校对媒体2；
src:
   @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>

<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>

font-weight: "bold";

font-weight: bold;