html - @font-Face 无法在 Web 服务器上工作

Question

我网站的字体不工作...

我在一个网站上工作，我的 css 中有一个名为 @font-face 的属性当我已经将网站上传到网络服务器时......在我的浏览器(chrome)中它运行良好但是当我要求某人为我检查它时该网站非常困惑。当我也在 mozilla 中检查它时，它也搞砸了......我使用自定义字体...

字体:

风车斜体

守护者

珍妮弗的歌

腓特烈大帝

如果你需要代码:

@font-face {
  font-family: "Air Millhouse  Italic";
  src: url("http://typefront.com/fonts/825593225.eot");
  src: local("☺"),
       url("http://typefront.com/fonts/825593225.woff") format("woff"),
       url("http://typefront.com/fonts/825593225.ttf") format("truetype"),
       url("http://typefront.com/fonts/825593225.svg") format("svg");
}

@import url(http://fonts.googleapis.com/css?family=Russo+One);
@import url(http://fonts.googleapis.com/css?family=Orbitron);

@font-face {
  font-family: "Fredericka the Great";
  src: local("☺"),
       url("FrederickatheGreat-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "a song for jennifer";
  src: local("☺"),
       url("asongforjennifer.ttf") format("truetype");
}

@font-face {
  font-family: "Guardians";
  src: local("☺"),
       url("Guardians.ttf") format("truetype");
}

@font-face {
  font-family: "quicksand";
  src: local("☺"),
       url("http://fonts.googleapis.com/css?family=Quicksand") format("opentype");
}


h1{
	text-align: center;
	color:#009900;
	font-family: air millhouse italic;
	font-size: 70px;
	opacity: 0.9;
}

h2{
	text-align: center;
	color: #6500ff;
	font-family: guardians;
	opacity:0.7; 
	font-size: 33px;
	letter-spacing: -1px;
	position: relative;
	bottom: 50px;
}

h2:hover{
	color:green;
	font-size: 40px;
}

#dew1{
	opacity: 0.5px;
	max-height: 60px;
	max-width: 60px; 
	position: relative;
	bottom:228px;
	right:130px;
}

#catdew{
	max-height: 200px;
	max-width: 200px;
	position: relative;
	z-index: -1;
	bottom:315px;
}

#catdew:hover{
	max-height: 250px;
	max-width: 250px;
}

#dance1{
	max-height: 135px;
	max-width: 135px;
	position: relative;
	bottom:510px;
	left:400px;
	z-index: -1;
}

#dance2{
	max-height: 135px;
	max-width: 135px;
	position: relative;
	bottom:510px;
	right:400px;
	z-index: -1;
}

h3{
	font-family: 'Russo One', sans-serif;;
	text-align: center;
	color:white;
	position: relative;
	bottom:470px;
	font-size: 30px;
}

#dew{
	color:white;
	font-family: courier new;
	text-align: center;
}

#dew:hover{
	color:yellow;
	font-family: arial black;
}

#down{
	color: #009900;
	font-family: fredericka the Great;
	text-align: center;
	font-size: 100px;
	position:relative;
	bottom: 500px;
}

#patient{
	color: white;
	font-family: courier new;
	text-align: center;
	position:relative;
	bottom: 500px;
}

#then{
	text-align: center;
	color: #009900;
	font-family: fredericka the Great;

}

#ab{
	color: #009900;
	font-family: fredericka the Great;
	text-align: center;
	font-size: 10px;
	position: relative;
	bottom: 645px;
}

#not{
	font-family: a song for jennifer;
	color: #009900;
	font-size: 60px;
	text-align: center;
	position: relative;
	bottom: 500px;
}

#adr{
	font-family: a song for jennifer;
	color: #009900;
	font-size: 23px;
	text-align: center;
	position: relative;
	bottom: 550px;
	left: 250px;
}

感谢您的帮助。

Answer 1

您需要更新字体的路径:

url("FrederickatheGreat-Regular.ttf")
url("asongforjennifer.ttf")
url("Guardians.ttf")

这些字体可能安装在您的计算机上，但没有安装在您 friend 的计算机上。查看代码中的所有其他字体如何具有完整路径，您需要将字体上传到服务器(如果您有权这样做)或在线查找提供商，例如 Google Fonts你用于“quicksand”字体的。