我安装的字体(@ font-face)无法在所有浏览器中使用 - 仅限Chrome

时间:2014-03-05 15:52:17

标签: css wordpress font-face

我在网站上安装了一种字体,但它只会在Chrome上显示(我在Firefox和资源管理器上查看过)。我不知道我是否遗漏了编码中的内容?

字体

@font-face {
font-family: 'octin_sports_freeregular';
src: url('octinsports-webfont.eot');
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'),
     url('octinsports-webfont.woff') format('woff'),
     url('octinsports-webfont.ttf') format('truetype'),
     url('octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;

}

然后在HTML中:

<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css"     charset="utf-8">

在标题中:

h1 {

font-size: 32px;
font-size: 2.25rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.7);
}


h2 {
font-size: 28px;
font-size: 1.875rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
color: #8CC63E;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}

链接:www.weareprodigy.co

1 个答案:

答案 0 :(得分:0)

每个浏览器在字体中使用不同的加载方式,有些使用EOT文件,有些使用WOFF文件。

您目前只将EOT文件上传到服务器,Chrome使用EOT文件,但IE&amp; Firefox将使用其他两种格式之一。

您需要确保将文件上传到正确的位置,并确保在CSS内链接到正确的位置。

修改

只是看看你的CSS。没有必要在根级别拥有额外的style.css,因为在实际主题中,字体已被调用。我的猜测是字体已放在根级别而不是主题文件夹中。

编辑2

更改主题style.css文件(wp-content / themes / epik / style.css)以显示此内容

@font-face {
font-family: 'octin_sports_freeregular';
src: url('../../../octinsports-webfont.eot');
src: url('../../../octinsports-webfont.eot?#iefix') format('embedded-opentype'),
     url('../../../octinsports-webfont.woff') format('woff'),
     url('../../../octinsports-webfont.ttf') format('truetype'),
     url('../../../octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}

由于字体位于根目录中,因此当css在epik主题文件夹atm中查找字体时,应该指向根文件。