@ font-face在chrome中的ff / opera中不起作用

Question

好吧，我有font-face元素的问题。它在chrome中运行良好，但在任何浏览器中都不起作用。问题是什么？提前谢谢。

演示 - ＆gt; http://codepen.io/designhorf/pen/AlJKp

Answer 1

您需要的不仅仅是otf文件。不同的浏览器需要不同的文件类型，IE像往常一样不行。

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

生成代码和文件的一个很好的资源是 http://www.fontsquirrel.com/tools/webfont-generator

玩得开心！