未采用字体的 CSS 设置

问题描述

如果我在 CSS 表中包含 Source Sans Pro 字体并使用 Inspector 在浏览器中检查字体，则会显示 Source Sans Pro。但它是 Times New Roman。

当我转到检查器中的“字体”选项卡时，它还会显示 Times New Roman。它也不会被 font-weight: 300; 接受。为什么不采用 Source Sans Pro 字体？

@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-Black.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-BlackItalic.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-Bold.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-BoldItalic.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-ExtraLight.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-ExtraLightItalic.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-Italic.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-Light.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-LightItalic.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-Regular.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-SemiBold.ttf") format("ttf");
} 
@font-face { 
  font-family: "Source Sans Pro"; 
  src: url("../fonts/source-sans-pro/SourceSanspro-SemiBoldItalic.ttf") format("ttf");
} 

:root {
  font-size: 62.5%
}

* {
  Box-sizing: border-Box;
}

body {
  font-family: 'Source Sans Pro','sans-serif';
  font-size: 1.6rem;
  font-weight: 300;
}

<!DOCTYPE html>
<html lang="de">
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
      
    <main>
      <p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr</p>
    </main>

  </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

font-face html webfonts