我正在为我的html网站使用otf font-face,它在计算机桌面上工作正常,但当我将其部署到主机时,font-face停止工作。我添加图像以显示差异。
我包含了所有文件,桌面和主机上的文件完全相同。
<style>
@font-face
{
font-family: proxima-nova-regular;
src: url("proxima-nova-regular.otf") format("opentype");
}
@font-face
{
font-family: proxima-nova-regular-italic;
src: url("proxima-nova-regular-italic.otf") format("opentype");
}
@font-face
{
font-family: proxima-nova-bold-regular;
src: url("proxima-nova-bold-regular.otf") format("opentype");
}
@font-face
{
font-family: proxima-nova-bold-regular-italic;
src: url("proxima-nova-bold-regular-italic.otf") format("opentype");
}
html, body
{
margin: 0px;
padding: 0px;
}
.topbanner
{
width: 100%;
height: 35px;
background:rgb(35,35,35);
}
.topbannerinside
{
width: 200px;
height: 35px;
line-height: 35px;
text-align: center;
color: white;
float: right;
font-family: proxima-nova-regular;
}
.topbannerinside:hover
{
color: rgb(0, 232, 255);
}
.container
{
width: 1150px;
height: 400px;
background: rgb(250,250,250);
border-radius: 50px;
margin: auto;
position: relative;
}
.header
{
width: 350px;
height: 40px;
font-family: proxima-nova-regular;
font-size: 42px;
top: 30px;
left: 60px;
position: absolute;
}
.subheader
{
width: 500px;
height: 90px;
font-family: proxima-nova-regular;
font-size: 14px;
position: absolute;
left: 440px;
top: 30px;
}
.selectregion
{
width: 460px;
height: 280px;
background-size: cover;
background-image: url(samplescreen.png);
border: dashed;
border-color: black;
border-width: 1px;
position: absolute;
left: 55px;
top: 110px;
}
.play
{
width: 112px;
height: 112px;
background: url(play.png);
position: absolute;
left: 540px;
top: 200px;
}
.play:hover
{
cursor: pointer;
}
.play:active
{
top: 202px;
}
.stop
{
width: 112px;
height: 112px;
background: url(stop.png);
position: absolute;
left: 666px;
top: 200px;
}
.stop:hover
{
cursor: pointer;
}
.stop:active
{
top: 202px;
}
.conversion
{
width: 300px;
height: 220px;
background: rgb(246,246,246);
border: dashed;
border-color: black;
border-width: 1px;
position: absolute;
left: 800px;
top: 130px;
}
.adsense
{
width: 733px;
height: 96px;
background-image: url(http://www.lostsaloon.com/wp-content/uploads/adsense-image-leaderboard.jpg);
margin: auto;
margin-top: 10px;
}
.recentlyadded
{
width: 1150px;
height: 190px;
background: rgb(250,250,250);
border-radius: 50px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.recentlyaddedtext
{
width: 250px;
height: 50px;
line-height: 50px;
color: rgb(120,0,255);
margin-left: 90px;
font-size: 18px;
font-family: proxima-nova-regular;
}
.recentlyaddedscreenshot
{
width: 190px;
height: 110px;
background: lightgrey;
float: left;
margin-left: 30px;
}
.imgareaselect-border1 {
background: url(border-anim-v.gif) repeat-y left top;
}
.imgareaselect-border2 {
background: url(border-anim-h.gif) repeat-x left top;
}
.imgareaselect-border3 {
background: url(border-anim-v.gif) repeat-y right top;
}
.imgareaselect-border4 {
background: url(border-anim-h.gif) repeat-x left bottom;
}
.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
opacity: 0.5;
filter: alpha(opacity=50);
}
.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.imgareaselect-outer {
background-color: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.imgareaselect-selection {
}
</style>
答案 0 :(得分:0)
偶然的可能性:
什么是主机服务器类型(例如Apache,IIS等)?可能的是,提供OTF文件的任何内容都没有使用正确的MIME类型提供服务,这意味着它不会被处理为字体。
我经常在我的'font-family:'blah blah';'