@ font-face雖然可以訪問所有字體文件，但不能加載

除了在CSS文件中的@font face之外，我的網絡中的所有內容都運行良好。我的網站使用2種字體，這兩種字體都不能加載顯示。其中之一是fontawesome。我都試圖從我的服務器和fontawesome服務器加載字體，但結果是一樣的。@ font-face雖然可以訪問所有字體文件，但不能加載

我試圖在PC瀏覽器IE瀏覽器邊緣，Firefox和Chrome瀏覽器中查看頁面，但都沒有正常工作。但是，當我在iPad Safari中測試時，它運行良好。

請注意，所有的字體文件都可以訪問，我的電腦可以在fontawesome.io中完美地查看字體。請提出建議，我的代碼有什麼問題。

下面是代碼：

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); 
    src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0')    format('embedded-opentype'), 
     url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0')     format('woff2'), 
     url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0')     format('woff'), 
     url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0')     format('truetype'), 
     url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

下面是結果在PC（字體工作面不是負載）：

Font Face Result in PC

下面是結果在ipad（字體已負載成功）：

Font Face Result in Mobile

來源

2016-11-20 Itsbest2b

你在PC上看到的是字符鏈接到的unicode。類似的問題已經在這裏得到解答：http://stackoverflow.com/questions/16284451/font-face-custom-icon-font-only-showing-unicodes。確保您的字體文件是網頁字體，並檢查您的網頁文檔的編碼和unicode範圍，以及您的字體文件的使用情況。 –

從PNG來看，理解這個問題是不可能的。我可以告訴你，讀好this link你可以找到你的解決方案。

如果使用CSS 將整個font-awesome目錄複製到您的項目中。在您的html的<head>中，引用您的font-awesome.min.css的位置。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

使用無禮或更少 使用此方法使用較少或SASS自定義字體真棒4.7.0。

將font-awesome/目錄複製到您的項目中。打開您的項目的font-awesome/less/variables.less或font-awesome/scss/_variables.scss並編輯@fa-font-path或$fa-font-path變量以指向您的字體目錄。 @fa-font-path: "../font"; 字體路徑與編譯的CSS目錄相對。

來源

2016-11-20 11:19:19

非常感謝，但我認爲這是字體不加載的原因。我不知道爲什麼:( 這是網頁鏈接 https://staging2.ipsosinteractive.com/mriweb/mriweb.dll?i.project=S16020040&id=12 – Itsbest2b

我在桌面上看到圖標。 –

如果您的網站通過HTTPS協議運行，並且您嘗試通過HTTP加載外部資源 - 加載將被瀏覽器阻止。

其次，如果上述情況並非如此 - 確保您加載的字體與正確文件的路徑，例如：

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

或使用引導CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

來源

2016-11-20 11:25:54 bodi0

@ font-face雖然可以訪問所有字體文件，但不能加載

回答

相關問題