我在网站上安装了一种字体,但它只会显示在Chrome上(我在Firefox和Explorer上检查过)。我不知道编码中是否遗漏了某些内容?
字体
@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
每个浏览器使用不同的字体加载方式,有些使用EOT
文件,有些使用WOFF
文件。
您目前只有EOT
文件上传到服务器,chrome使用EOT
文件,但IE和Firefox将使用其他两种格式之一。
您需要确保文件上传到正确的位置,并且在您的CSS
中,您链接到正确的位置。
编辑
只是看了一眼你的CSS
.没有必要在根级别使用额外的样式.css因为在实际主题中,字体已经被调用了。我的猜测是字体已放在根级别而不是主题文件夹中。
编辑 2
更改您的主题样式.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 中查找字体。