@font-face 只能在本地工作

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 只能在本地工作

@font-face only working locally

css

fonts

class

file

font-face