1

我似乎无法找到我正在寻找的答案。我有一个完全静态的页面，主要由图像组成。用于创建图像的字体是任何 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 的检查器中应用的规则，但它不会改变外观。我想做的事情是不可能的还是我做错了？

4

3 回答 3

5

使用这种格式

@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。

获取字体的所有版本。谷歌“字体转换器”，首页会有很多字体转换器服务。

于 2013-04-15T12:45:14.513 回答
0

确保 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');
}
于 2013-04-15T12:48:53.303 回答
0

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

您只需要 .otf 或 .ttf 文件。然后，FontSquirrel 将为您制作 .svg、.eot、.woff 并创建一个 css 文件。

于 2013-04-15T13:25:35.270 回答