如何解决未采用字体的 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 举报,一经查实,本站将立刻删除。