Question

我无法在Mac上的任何浏览器中使用@ font-face。我相信这是相关的代码，但我很乐意粘贴其他部分。 mac有不同的处理方式吗？

@font-face {
font-family: BebasNeue;
src: url('fonts/BebasNeue.otf');
}

/*----HEADING----*/
.heading {
font-family: BebasNeue, sans-serif;
}

.word1{
font-size: 100px;
position: absolute;
top: 35px;
}

.word2{
font-size: 79px;
color: 6a6964;
position: absolute;
top: 54px;
left: 165px;
}

.word3{
font-size: 106px;
position: absolute;
top: 104px;
}

.tagline {
font-family: BebasNeue, sans-serif;
font-size: 35px;
color: c1bcb6;
position: absolute;
top: 205px;
left: 13px;
}

.tagWord2{
color: 6a6964;
}

.copyright {
font-family: arial, sans-serif;
color: 6a6964;
font-size: 13px;
font-variant: small-caps;
position: absolute;
top: 245px;
left: 215px;
}

PS我最近做了肩部手术，所以当我用一只手敲击键盘时，我感谢你的耐心。谢谢！

***所以我弄清楚我的错误，字体位置有错误，我的本地机器已经加载了字体。我没有足够的声誉来回答或删除我自己的问题，所以第一个发布该答案的人我将标记为正确。

Answer 1

你从哪里获得BebasNeue.otf字体文件？难道它不是真正的otf字体吗？

要使font-face与浏览器完全兼容，您需要提供更多不同格式的字体源。这是一个很好的起点：http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

@ font-face无法处理ff，chrome和safari（在mac上）

1 个答案: