網頁字體無法在第一頁的Firefox和Internet Explorer中加載

我有一個基於Expression Engine構建的網站，儘管Google Chrome和Safari瀏覽器中的所有內容都能正常工作，但我在Internet Explorer和Firefox中遇到網絡字體問題。問題在於，當您第一次訪問該網站時，字體將不會顯示。如果您加載不同的頁面，則會顯示字體，並且一切都很好。但是，如果清除瀏覽器的緩存並返回到網站，則問題再次出現。網頁字體無法在第一頁的Firefox和Internet Explorer中加載

我已經嘗試了一切，從本地加載字體到確保字體樣式正確加載在頁面頂部。

下面是我的CSS模板的前幾行，它是在html文件的開頭加載的，但在「標題」模板中。有什麼想法嗎？提前感謝您提供任何幫助！有問題的網站是：http://bayareafellowship.com

@font-face { 
    font-family: 'montserratregular'; 
    src: url('fonts/montserrat-regular-webfont.eot'); 
    src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/montserrat-regular-webfont.woff') format('woff'), 
     url('fonts/montserrat-regular-webfont.ttf') format('truetype'), 
     url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

@font-face { 
    font-family: 'leaguegothic-regular-webfont'; 
    src: url('fonts/leaguegothic-regular-webfont.eot'); 
    src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/leaguegothic-regular-webfont.woff') format('woff'), 
     url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'), 
     url('fonts/leaguegothic-regular-webfont.svg#leaguegothic-regular-webfontregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

.montserratregular { 
    font-family: 'montserratregular'; 
} 

.leaguegothic-regular-webfont { 
    font-family: 'leaguegothic-regular-webfont'; 
} 

.montserratbold { 
    font-family: 'monteserratbold'; 
}

來源

2014-04-18 Jose Garza

具體哪個版本的IE？打F12。切換到控制檯選項卡。該頁面是否顯示錯誤消息？ – EricLaw

所以原來是一個服務器問題，字體文件不被識別爲在同一臺服務器上。這是爲我解決所有問題的一段代碼，放在.htaccess文件中。

<FilesMatch "\.(ttf|otf|eot|woff)$"> 
    <IfModule mod_headers.c> 
     Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
    </FilesMatch>

我仍然遇到與FOUT有關的問題，但那是另一天的另一個故事。感謝大家的幫助！

來源

2014-04-20 02:42:21

我也曾有過類似的問題，在IE忽略字體偶爾。然後問題是我使用的字體家族名稱包含了太多的字符爲IE瀏覽器，但工作正常所有其他瀏覽器。

儘量縮短名稱，尤其是'leaguegothic-regular-webfont'。不知道這是否能解決您的問題，但值得一試。

來源

2014-04-18 10:03:26 Topr

謝謝你的迴應！長的字體家族名稱實際上是匹配Web字體系列名稱的嘗試。原文是'league_gothic'，錯誤仍然存在。 –

網頁字體無法在第一頁的Firefox和Internet Explorer中加載

回答

相關問題