CSS字体-face不起作用。

Question

我想在我的网站上添加自定义字体。我尝试了很多方法，但都没有成功。这是我的CSS代码：

@font-face
{
    font-family: myFirstFont;
    src: url('ellis.ttf');
}

body
{
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    font-size: 11px;
    line-height: 1;
    font-family: myFirstFont,arial,san-serif;
    overflow:auto;
    background:#ecf6f7;
}

我知道这不是一个跨浏览器的情况，但我首先尝试使一个简单的情况正常工作。

- Rafael Sedrakyan

---

你确定字体路径正确吗？ - Bram Vanroy

在body中的font-family属性中，尝试直接调用："font-family: "myFirstFont";" - RSM

是的，我很确定，而且我已经尝试过了。 - Rafael Sedrakyan

我现在在Chrome中遇到了类似的问题（Safari可以正常呈现字体）。当我查看Chrome开发者工具中的资源选项卡时，我可以看到字体的条目，但是点击它后预览显示的却是类似Times New Roman的字体。 - PeterT

Answer 1

在URL后添加 format("opentype")。

- Dustin

Answer 2

如何应用字体..

@font-face
{
    font-family: 'ellis';
    src: url('ellis.ttf');
}
.body
{
    font-family: "ellis";
}

- CSS Guy

---

字体族和字体名称应该相同...在你的情况下，你正在使用字体族 myFirstFont 和字体名称 ellis.ttf。 - CSS Guy

请在帖子中提供详细解释。仅提供代码的回答会被反对，您可能会收到负评。 - Manishearth

这是我的观点，我不能百分之百确定这个答案。因为我在我的项目中使用了相同的代码，而且它百分之百地工作了。 - CSS Guy

Answer 3

在@font-face和body的字体声明中都加上引号。

因此，在两者中都添加：

font-family: "myFirstFont";

或者尝试这个方法，以确保所有代码都是正确的，并确保它不是代码：

http://www.fontsquirrel.com/fontface/generator

这听起来可能很愚蠢，但请确保字体和路径的所有拼写都是正确的。

- RSM

---

这并不是必要的：http://www.css3.info/preview/web-fonts-with-font-face/ 尽管这似乎更合乎逻辑！ - Bram Vanroy

添加标记没有任何作用。我已经尝试过fontsquirrel服务，但它不起作用。 - Rafael Sedrakyan

如果Font Squirrel无法正常工作，那么问题可能不在于代码，而是其他方面，比如路径或字体本身的问题。 - RSM

我已经尝试了来自http://angelinagasparyan.am/www/的字体文件。它在那里可以工作，但在我的本地主机上无法工作。CSS和TTF文件在同一个文件夹中。因此，我非常确定字体文件路径没有错误。 - Rafael Sedrakyan

Answer 4

您确定字体文件被引用到了正确的位置吗？文件ellis.ttf将从样式表所在的位置引用。

如果您的HTML页面位于http://website.com/page.html，但CSS位于http://website.com/css/page.css，那么它将在http://website.com/css/ellis.ttf查找ellis.ttf。

- Death

---

我的CSS文件和TTF文件在同一个文件夹中。 - Rafael Sedrakyan

我能够提供的唯一解释是，要么您正在使用过时的浏览器（我不太相信），要么.ttf文件已损坏或未正确上传。 - Death

字体已经损坏了。我之前尝试了一些其他的字体，但我猜它们也是损坏的。谢谢帮忙。 - Rafael Sedrakyan