@ font-face - 在導入.ttf和.svg後不顯示自定義字體

Question

在我正在開發的網站上，我可以導入並通過@font-face顯示我的自定義字體。

它完美地在不同瀏覽器

在具體的我所做的是：

@font-face { 
font-family: 'MyCustomFont'; 
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */ 
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

body { 
font-family: 'MyCustomFont', sans-serif; 
} 

的問題是，當我嘗試導入的.ttf和.SVG格式化字體不再顯示，並且將應用後備字體。

我這是怎麼進口.SVG和.TTF

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

body { 
font-family: 'MyCustomFont', sans-serif; 
} 

爲什麼會出現這種情況？

是否可以解決它？

在此先感謝

Answer 1

將逗號放在每行的末尾而不是「;」只定義一次源。

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