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 */
}

@ font-face - 导入.ttf和.svg后不显示自定义字体

1 个答案: