Firefox 中的字体非常小
Font size very small in firefox
我创建了一个网站,我希望标题 <h1>
调整其大小以及 <header>
的宽度。为此,我使用了 vw
属性。但是 属性 在 firefox 中不起作用,因为那里显示的字体非常小。
你可以在这个fiddle中明白我的意思。如果你在 firefox 中 运行 这个 fiddle,你会看到小字体。
Body {
background: white;
font-family: "Myriad Pro";
size: 12px;
color: #323232;
}
header {
position: relative;
width: auto;
height: auto;
max-height: 239px;
min-height: inherit;
background: #d1d2d4;
overflow: hidden;
}
header h1 {
font-family: "Arial";
font-size-adjust: 0.10;
font-size: 5vw;
color: black;
position: absolute;
left: 13.5%;
top: 25%;
}
header p {
font-family: "Myriad Pro";
font-size-adjust: 0.10;
font-size: 2vw;
color: #404041;
position: absolute;
left: 13.5%;
top: 64%;
letter-spacing: 2pt;
}
<header>
<img src="images/Logo.png" style="margin-left:2.5%; margin-top:2.5%; width:10%; height:inherit;" />
<h1 style="">Website®</h1>
<p>Welcome To My Website!</p>
<img src="http://tinyurl.com/ku6cgpy" style="align: right; float:right; width:40%; height:auto; overflow-style:auto; overflow:visible;" />
</header>
谁能告诉我我做错了什么?
从您的 css
中删除 font-size-adjust: 0.1
这里是Fiddle
删除 header h1
中的 font-size-adjust: 0.1
Body {
background: white;
font-family: "Myriad Pro";
size: 12px;
color: #323232;
}
header {
position: relative;
width: auto;
height: auto;
max-height: 239px;
min-height: inherit;
background: #d1d2d4;
overflow: hidden;
}
header h1 {
font-family: "Arial";
font-size: 5vw;
color: black;
position: absolute;
left: 13.5%;
top: 25%;
}
header p {
font-family: "Myriad Pro";
font-size-adjust: 0.10;
font-size: 2vw;
color: #404041;
position: absolute;
left: 13.5%;
top: 64%;
letter-spacing: 2pt;
}
<header>
<img src="images/Logo.png" style="margin-left:2.5%; margin-top:2.5%; width:10%; height:inherit;" />
<h1 style="">Website®</h1>
<p>Welcome To My Website!</p>
<img src="http://tinyurl.com/ku6cgpy" style="align: right; float:right; width:40%; height:auto; overflow-style:auto; overflow:visible;" />
</header>
我创建了一个网站,我希望标题 <h1>
调整其大小以及 <header>
的宽度。为此,我使用了 vw
属性。但是 属性 在 firefox 中不起作用,因为那里显示的字体非常小。
你可以在这个fiddle中明白我的意思。如果你在 firefox 中 运行 这个 fiddle,你会看到小字体。
Body {
background: white;
font-family: "Myriad Pro";
size: 12px;
color: #323232;
}
header {
position: relative;
width: auto;
height: auto;
max-height: 239px;
min-height: inherit;
background: #d1d2d4;
overflow: hidden;
}
header h1 {
font-family: "Arial";
font-size-adjust: 0.10;
font-size: 5vw;
color: black;
position: absolute;
left: 13.5%;
top: 25%;
}
header p {
font-family: "Myriad Pro";
font-size-adjust: 0.10;
font-size: 2vw;
color: #404041;
position: absolute;
left: 13.5%;
top: 64%;
letter-spacing: 2pt;
}
<header>
<img src="images/Logo.png" style="margin-left:2.5%; margin-top:2.5%; width:10%; height:inherit;" />
<h1 style="">Website®</h1>
<p>Welcome To My Website!</p>
<img src="http://tinyurl.com/ku6cgpy" style="align: right; float:right; width:40%; height:auto; overflow-style:auto; overflow:visible;" />
</header>
谁能告诉我我做错了什么?
从您的 css
中删除font-size-adjust: 0.1
这里是Fiddle
删除 header h1
font-size-adjust: 0.1
Body {
background: white;
font-family: "Myriad Pro";
size: 12px;
color: #323232;
}
header {
position: relative;
width: auto;
height: auto;
max-height: 239px;
min-height: inherit;
background: #d1d2d4;
overflow: hidden;
}
header h1 {
font-family: "Arial";
font-size: 5vw;
color: black;
position: absolute;
left: 13.5%;
top: 25%;
}
header p {
font-family: "Myriad Pro";
font-size-adjust: 0.10;
font-size: 2vw;
color: #404041;
position: absolute;
left: 13.5%;
top: 64%;
letter-spacing: 2pt;
}
<header>
<img src="images/Logo.png" style="margin-left:2.5%; margin-top:2.5%; width:10%; height:inherit;" />
<h1 style="">Website®</h1>
<p>Welcome To My Website!</p>
<img src="http://tinyurl.com/ku6cgpy" style="align: right; float:right; width:40%; height:auto; overflow-style:auto; overflow:visible;" />
</header>