當部署到主機時font-face不工作

Question

我爲我的html網站使用了一個otf font-face，它在計算機桌面上工作正常，但是當我將它部署到主機時，font-face停止工作。我添加圖像以顯示差異。

我包含了所有的文件，我的桌面和主機上的文件是相同的。

<style> 
     @font-face 
     { 
     font-family: proxima-nova-regular; 
     src: url("proxima-nova-regular.otf") format("opentype"); 
     } 
     @font-face 
     { 
     font-family: proxima-nova-regular-italic; 
     src: url("proxima-nova-regular-italic.otf") format("opentype"); 
     } 
     @font-face 
     { 
     font-family: proxima-nova-bold-regular; 
     src: url("proxima-nova-bold-regular.otf") format("opentype"); 
     } 
     @font-face 
     { 
     font-family: proxima-nova-bold-regular-italic; 
     src: url("proxima-nova-bold-regular-italic.otf") format("opentype"); 
     } 
     html, body 
     { 
      margin: 0px; 
      padding: 0px; 
     } 

     .topbanner 
     { 
      width: 100%; 
      height: 35px; 
      background:rgb(35,35,35); 
     } 
     .topbannerinside 
     { 
      width: 200px; 
      height: 35px; 
      line-height: 35px; 
      text-align: center; 
      color: white; 
      float: right; 
      font-family: proxima-nova-regular; 
     } 
     .topbannerinside:hover 
     { 
      color: rgb(0, 232, 255); 
     } 
     .container 
     { 
      width: 1150px; 
      height: 400px; 
      background: rgb(250,250,250); 
      border-radius: 50px; 
      margin: auto; 
      position: relative; 
     } 
     .header 
     { 
      width: 350px; 
      height: 40px; 
      font-family: proxima-nova-regular; 
      font-size: 42px; 
      top: 30px; 
      left: 60px; 
      position: absolute; 
     } 
     .subheader 
     { 
      width: 500px; 
      height: 90px; 
      font-family: proxima-nova-regular; 
      font-size: 14px; 
      position: absolute; 
      left: 440px; 
      top: 30px; 
     } 
     .selectregion 
     { 
      width: 460px; 
      height: 280px; 
      background-size: cover; 
      background-image: url(samplescreen.png); 
      border: dashed; 
      border-color: black; 
      border-width: 1px; 
      position: absolute; 
      left: 55px; 
      top: 110px; 
     } 
     .play 
     { 
      width: 112px; 
      height: 112px; 
      background: url(play.png); 
      position: absolute; 
      left: 540px; 
      top: 200px; 
     } 
     .play:hover 
     { 
      cursor: pointer; 
     } 
     .play:active 
     { 
      top: 202px; 
     } 
     .stop 
     { 
      width: 112px; 
      height: 112px; 
      background: url(stop.png); 
      position: absolute; 
      left: 666px; 
      top: 200px; 
     } 
     .stop:hover 
     { 
      cursor: pointer; 
     } 
     .stop:active 
     { 
      top: 202px; 
     } 
     .conversion 
     { 
      width: 300px; 
      height: 220px; 
      background: rgb(246,246,246); 
      border: dashed; 
      border-color: black; 
      border-width: 1px; 
      position: absolute; 
      left: 800px; 
      top: 130px; 
     } 
     .adsense 
     { 
      width: 733px; 
      height: 96px; 
      background-image: url(http://www.lostsaloon.com/wp-content/uploads/adsense-image-leaderboard.jpg); 
      margin: auto; 
      margin-top: 10px; 
     } 
     .recentlyadded 
     { 
      width: 1150px; 
      height: 190px; 
      background: rgb(250,250,250); 
      border-radius: 50px; 
      margin: auto; 
      margin-top: 10px; 
      margin-bottom: 10px; 
     } 
     .recentlyaddedtext 
     { 
      width: 250px; 
      height: 50px; 
      line-height: 50px; 
      color: rgb(120,0,255); 
      margin-left: 90px; 
      font-size: 18px; 
      font-family: proxima-nova-regular; 
     } 
     .recentlyaddedscreenshot 
     { 
      width: 190px; 
      height: 110px; 
      background: lightgrey; 
      float: left; 
      margin-left: 30px; 
     } 


.imgareaselect-border1 { 
    background: url(border-anim-v.gif) repeat-y left top; 
} 

.imgareaselect-border2 { 
    background: url(border-anim-h.gif) repeat-x left top; 
} 

.imgareaselect-border3 { 
    background: url(border-anim-v.gif) repeat-y right top; 
} 

.imgareaselect-border4 { 
    background: url(border-anim-h.gif) repeat-x left bottom; 
} 

.imgareaselect-border1, .imgareaselect-border2, 
.imgareaselect-border3, .imgareaselect-border4 { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

.imgareaselect-handle { 
    background-color: #fff; 
    border: solid 1px #000; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

.imgareaselect-outer { 
    background-color: #000; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

.imgareaselect-selection { 
} 

    </style> 

Answer 1

夫婦可能性：

1. 什麼是主機服務器類型（例如Apache的，IIS，等）？可能的是，無論服務於OTF文件的服務是否以正確的MIME類型提供，這意味着它將不會被處理爲字體。

2. 我通常會在我的'font-family：'blah blah';'