Question

我试过搜索许多线程寻找答案，但似乎我已经尝试了所有解决方案。我有一个字体上传到eHost，CSS指向该文件。我正在使用@ font-face让用户下载字体。我已经下载了它，所以它在本地工作，但不在服务器上。

@font-face {
	font-family: BigNoodleTitling;
	src:url('Files/Fonts/big_noodle_titling.eot');
        src:url('Files/Fonts/big_noodle_titling.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('Files/Fonts/big_noodle_titling.woff2') format('woff2'), /* Super Modern Browsers */
            url('Files/Fonts/big_noodle_titling.woff') format('woff'), /* Pretty Modern Browsers */
            url('Files/Fonts/big_noodle_titling.ttf')  format('truetype'), /* Safari, Android, iOS */
            url('Files/Fonts/big_noodle_titling.svg#svgFontName') format('svg'); /* Legacy iOS */
	src:local('BigNoodleTitling'); 
}
body {
	font-size: 100%;
	font-family: BigNoodleTitling, Helvetica, Helvetica Neue, DIN Condensed Bold, Avenir, Times New Roman;
	background-color: rgba(255,255,255,1.00);
}
.nav {
	max-width: 1000px;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1px;
	text-align: center;
}
.nav h2 {
	font-family: 'BigNoodleTitling'; 
	display: inline;
        font-size: 32px;
	padding: 10px;
	color: #FFB8BB;
	letter-spacing: 1.2px;
}
.nav h2 a {
	color: #FFB8BB;
	text-decoration: none;
}
.nav h2 a:hover {
	color: #A17477;
	text-decoration: none;
}

我正在浏览的网站是：http://livelliottillustration.com/

Answer 1

@font-face不允许多个src属性。像这样缩小它：

@font-face {
  font-family: BigNoodleTitling;
  src: url('../Files/Fonts/big_noodle_titling.eot?#iefix') format('embedded-opentype'),
       url('../Files/Fonts/big_noodle_titling.woff2') format('woff2'),
       url('../Files/Fonts/big_noodle_titling.woff') format('woff'),
       url('../Files/Fonts/big_noodle_titling.ttf') format('truetype'),
       url('../Files/Fonts/big_noodle_titling.svg#svgFontName') format('svg'),
       local('BigNoodleTitling');
}

//旧回答的一部分：
移除../它应该有效，因为Files和style.css都在根级别。

如果您的字体文件仍无效，请尝试使用FontSquirrel生成字体包。

@ font-face只在本地工作

1 个答案: