CSS @font-face 不适用于 Mac 字体答案

【问题标题】：CSS @font-face isn't working with Mac fontCSS @font-face 不适用于 Mac 字体
【发布时间】：2013-04-15 12:37:50
【问题描述】：

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

【问题讨论】：

标签： css font-face truetype

【解决方案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');
}

如需进一步了解字体语法，请阅读Bulletproof @font-face Syntax。

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

【讨论】：

但是我从哪里获得所有版本的字体？我目前只是想让它在 chrome 上工作，从我读过的内容来看，ttf 应该可以工作吗？
@Cobolt 我刚刚更新了我的答案。您可以尝试 google 在线字体转换器以获取字体的所有版本
谢谢，虽然我不得不放弃我正在使用的字体，但使用这种格式效果很好，因为它通常可以正常工作。字体松鼠说 ttf 文件已损坏，即使我尝试了多个来源的版本。手写 Dakota.ttf 似乎有一些严重的问题

【解决方案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');
}

【讨论】：

【解决方案3】：

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

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

【讨论】：