font-face不適用於所有瀏覽器

我嘗試使用面部字體將幾個字體添加到我的頁面，但不幸的是，即使我按照說明使其與瀏覽器兼容，它僅適用於Chrome和Safari我無法弄清楚爲什麼。我嘗試了兩種不同的方法。font-face不適用於所有瀏覽器

第一個看起來是這樣的：

@font-face { 
    font-family: 'robotoblack'; 
    src: url('roboto-black-webfont.eot'); /* per IE 5-8 */ 
    src: local('☺'), /* direttiva local per IE */ 
    url('roboto-black-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */ 
     url('roboto-black-webfont.ttf') format('truetype'); /* Opera, Safari */ 
} 

@font-face { 
    font-family: 'robotomedium_italic'; 
    src: url('roboto-mediumitalic-webfont.eot'); /* per IE 5-8 */ 
    src: local('☺'), /* direttiva local per IE */ 
    url('roboto-mediumitalic-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */ 
     url('roboto-mediumitalic-webfont.ttf') format('truetype'); /* Opera, Safari */ 
}

，第二個是這樣的：

@font-face { 
    font-family: 'robotoblack'; 
    src: url('roboto-black-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('roboto-black-webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('roboto-black-webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('roboto-black-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('roboto-black-webfont.svg#robotoblack') format('svg'); /* Legacy iOS */ 
} 

@font-face { 
    font-family: 'robotomedium_italic'; 
    src: url('roboto-mediumitalic-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('roboto-mediumitalic-webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('roboto-mediumitalic-webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('roboto-mediumitalic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg'); /* Legacy iOS */ 
}

你能告訴我這兩種方法是最好的？任何建議，使其適用於所有瀏覽器？

在你想看到的例子情況下，可以在這裏找到：

enter link description here

我希望你能幫助！在此先感謝

乾杯

恩里科

來源

2016-06-12 Enrico Trevisan

您的字體不與stiles.css文件（我無法通過引用它們在瀏覽器中加載它們），它們在哪裏？ –

他們在一個文件夾中，但是因爲您問了這個問題，我將它們複製到stile.css文件所在的主文件夾中。這是對的嗎？仍然沒有工作.... –

我看到了答案，你正確調用FONT-FAMILY。確保使用@ font-face font-family聲明。在這種情況下，請使用'robotoblack'而不是'roboto-black'。調用字體時在你的css中使用引號。

我還建議先調用@ font-face，然後在css中調用這些字體家族。

來源

2016-06-12 17:06:44

啊，這是錯誤的;感謝隊友，它現在正在工作:)） –

所有好伴侶！很高興我能幫上忙。 –

font-face不適用於所有瀏覽器

回答

相關問題