Question

我搜索了Stack溢出但未能找到解决我面临的问题的解决方案......我相信很多人也面临同样的问题，但我不确定为什么他们的解决方案无法解决我的问题。

问题：这是关于@ font-face。

CSS上的代码：

    @font-face {
font-family: 'JaguarJCBold';
src: url('fonts/jagb____-webfont.eot');
src: url('fonts/jagb____-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/jagb____-webfont.woff') format('woff'),
     url('fonts/jagb____-webfont.ttf') format('truetype'),
     url('fonts/jagb____-webfont.svg#JaguarJCBold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'TrajanProBold';
src: url('fonts/trajanprobold-webfont.eot');
src: url('fonts/trajanprobold-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/trajanprobold-webfont.woff') format('woff'),
     url('fonts/trajanprobold-webfont.ttf') format('truetype'),
     url('fonts/trajanprobold-webfont.svg#TrajanProBold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'TrajanProRegular';
src: url('fonts/trajanproregular-webfont.eot');
src: url('fonts/trajanproregular-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/trajanproregular-webfont.woff') format('woff'),
     url('fonts/trajanproregular-webfont.ttf') format('truetype'),
     url('fonts/trajanproregular-webfont.svg#TrajanProRegular') format('svg');
font-weight: normal;
font-style: normal;

}



@font-face {
font-family: 'MyriadProBlack';
src: url('fonts/myriadpro-black-webfont.eot');
src: url('fonts/myriadpro-black-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/myriadpro-black-webfont.woff') format('woff'),
     url('fonts/myriadpro-black-webfont.ttf') format('truetype'),
     url('fonts/myriadpro-black-webfont.svg#MyriadProBlack') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'MyriadProRegular';
src: url('fonts/myriadproreg-webfont.eot');
src: url('fonts/myriadproreg-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/myriadproreg-webfont.woff') format('woff'),
     url('fonts/myriadproreg-webfont.ttf') format('truetype'),
     url('fonts/myriadproreg-webfont.svg#MyriadProRegular') format('svg');
font-weight: normal;
font-style: normal;

}

有没有人知道如何让谷歌浏览器的这项工作让我的字体生效？

Answer 1

尝试使用Font Squirrel Font Face生成器：

http://www.fontsquirrel.com/fontface/generator

它将为每个可能的浏览器提供所有正确的CSS。

Answer 2

您所做的就是设置字体，以便它们可以在您的css文件中使用。您需要将字体应用于您想要样式的文本。您可以使用与使用任何其他Web安全字体时相同的方式执行此操作。

例如

.yourElement {
  font: 30px JaguarJCBold;
}

Chrome的Font Face问题

2 个答案: