CSS @ font -face不支持Mac字体

Question

我似乎找不到我想要的答案。我有一个完全静态的页面，主要由图片组成。用于创建图像的字体是在任何Mac安装中都可以找到的“Handwriting DACCOTA.ttf”。我有一个包含文本的动态元素，我想将其设置为该字体。我将ttf字体放在css文件所在的目录中。

@font-face{
 font-family: dakota;
 src: url('dakota.ttf') format('truetype');
}

在包含css文件的html文件中。<p style="font-family: dakota;">sometext</p>

我可以在chrome的检查器中看到应用的规则，但它不会改变外观。我想做的事情是不可能的，还是我做错了？

Answer 1

使用此格式

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

要进一步了解font-face语法，请阅读Bulletproof @font-face Syntax。

以获取字体的所有版本。谷歌的“字体转换器”，将有大量的字体转换服务在第一页。

Answer 2

确保url是相对于css文件而不是webroot的。

@font-face{
    font-family: 'dakota';
    src: url('../fonts/dakota.ttf') format('truetype');
}

您可能应该添加其他类型，以确保其他浏览器可以顺利使用该字体。

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

Answer 3

@Cobolt，你可以试试FontSquirrel。http://www.fontsquirrel.com/fontface/generator。

您所需要的只是.otf或.ttf文件。然后，FontSquirrel将为您生成.svg、.eot、.woff并创建css文件。