css导入本地思源黑体失败

Question

• 使用local导入本地字体，但显示时全为微软雅黑。
• 已删除其他font-family，保证css中不存在使用其他字体
• 将local中的改为宋体或Simsun或SimSun均可使用宋体
• 放入了以下几个字体文件

  SourceHanSansCN-Bold.ttf
  SourceHanSansCN-ExtraLight.ttf
  SourceHanSansCN-Heavy.ttf
  SourceHanSansCN-Light.ttf
  SourceHanSansCN-Medium.ttf
  SourceHanSansCN-Normal.ttf
  SourceHanSansCN-Regular.ttf
  

• 以下是css，

  @font-face {
    font-family: "Source Han Sans CN";
    src: local("Source Han Sans CN") ;
  }
  body {
    font-family: "Source Han Sans CN";
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
  }
  

Answer 1

如果你想在网页中使用本地的思源黑体字体，你需要使用 @font-face 来声明字体。你可以在你的 CSS 文件中添加以下内容：

@font-face {
font-family: 'My Source Han Sans';
src: url('/fonts/source-han-sans.ttf') format('truetype');
}

然后，你就可以使用 font-family 属性来使用这个字体了。例如：

body {
font-family: 'My Source Han Sans', sans-serif;
}

有几点需要注意：

确保你指定的字体文件路径是正确的。如果文件不在你所期望的位置，那么浏览器就无法加载它。

如果你在本地开发，请确保你的本地服务器能够访问到这些字体文件。

如果你在生产环境中使用字体，请确保你在所有需要使用该字体的浏览器中都可以加载到这些字体文件。