css - @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 格式时，字体不再显示，将应用 Fallback 字体。

这就是我导入 .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 */
}