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

【问题标题】：Why won't my @Font-Faces load?为什么我的@Font-Faces 无法加载？
【发布时间】：2015-02-22 21:22:30
【问题描述】：

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

代码...

#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);
}

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

【问题讨论】：

字体文件夹在 CSS 文件夹内吗？

标签： css font-face webfonts font-family

【解决方案1】：

您需要将每个字体声明拆分为单独的@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);
}
...

【讨论】：

【解决方案2】：

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

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

【讨论】：