为什么我的@Font-Faces 无法加载？

Question

我的字体不会出现在我的网站上，我不知道为什么！我真正能想到的唯一原因是，也许我加载的太多了？但是，我尝试删除其中的一部分，但情况并非如此。有什么想法吗？

代码...

#panel1 h1 {
 color: #e66854;
 font-family: MuseoSansRounded500, helvetica, sans-serif;
 font-size:30px;
}


@font-face {
    font-family: MuseoSansRounded100;
    src:url(fonts/MUSEOSANSROUNDED-100_0.OTF);
 
 font-family: MuseoSansRounded300;
 src:url(fonts/MUSEOSANSROUNDED-300_0.OTF);
 
 font-family: MuseoSansRounded500;
 src:url(fonts/MUSEOSANSROUNDED-500_0.OTF);
 
 font-family: OpenSansLight;
 src:url(fonts/OpenSans-Light.ttf);
 
 font-family: OpenSansLightItalic;
 src:url(fonts/OpenSans-LightItalic.ttf);
 
 font-family: OpenSansReg;
 src:url(fonts/OpenSans-Regular.ttf);
 
 font-family: OpenSansRegItalic;
 src:url(fonts/OpenSans-Italic.ttf);
 
 font-family: OpenSansSemiBold;
 src:url(fonts/OpenSans-Semibold.ttf);
 
 font-family: OpenSansSemiBoldItalic;
 src:url(fonts/OpenSans-SemiboldItalic.ttf);
 
 font-family: OpenSansBold;
 src:url(fonts/OpenSans-Bold.ttf);
 
 font-family: OpenSansBoldItalic;
 src:url(fonts/OpenSans-BoldItalic.ttf);
}

提前感谢您的任何建议！ :)

Answer 1

一种对我有用的技术是在末尾添加格式：

src: url(fonts/MUSEOSANSROUNDED-300_0.OTF) format('opentype');

Answer 2

您需要将每个字体声明拆分为单独的@font-face 块

@font-face {
   font-family: MuseoSansRounded100;
   src:url(fonts/MUSEOSANSROUNDED-100_0.OTF);
}
@font-face {
   font-family: MuseoSansRounded300;
   src:url(fonts/MUSEOSANSROUNDED-300_0.OTF);
}
...

为什么我的@Font-Faces 无法加载？

Why won't my @Font-Faces load?

css

webfonts

font-face

font-family