Question

我似乎无法找到我正在寻找的答案。我有一个完全静态的页面，主要由图像组成。用于创建图像的字体是在任何Mac OS X安装中找到的“Handwriting-Dakota.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

确保网址是相对于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文件。

CSS @ font-face不使用Mac字体

3 个答案: