微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

未采用字体的 CSS 设置

如何解决未采用字体的 CSS 设置

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

font-family is Source Sans Pro

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

font-family is Times New Roman

@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 举报,一经查实,本站将立刻删除。