我使用 fontsquirrel 和 google 的字体,它们在桌面浏览器(IE、safari、chrome、firefox)上工作得很好。 但是当涉及到移动 safari,特别是 ipad2 和 iphone4 时,字体出现两次,意思是,它显示相同的单词两次,就好像是相同的文本两次!问题出在H1上。 我试过使用无衬线字体,它是一样的...... 我尝试更改字体粗细、字体大小等,但没有任何改变。
body {
color:#FFF;
font-family: 'Raleway', sans-serif;
font-weight: normal;
/*font-family: 'Open Sans', sans-serif;*/
min-width:960px;
top:0;
left:0;
position:absolute;
height:100%;
width:100%;
margin:0;
background-size:cover;
}
.ie body {
filter: dropshadow(color=#000000, offx=0, offy=1); }
h1 {
font-size:88px;
text-align:center;
padding-top:30px;
font-weight:700;
font-family:'quicksandregular',arial, sans-serif;
}
@media screen and (max-width:768px){ /* tablettes */
body {
min-width: initial !important;
font-weight: normal; /* */
font-size: 68px; /* */
}
.wrapper{
width:100%;
}
.styled div {
margin-bottom:10px;
}}
@media screen and(max-width:420px){ /* tel */
body{
font-weight: normal; /* */
font-size: 68px; /* */
}
h1{
float:initial;
text-align: center;
margin-left:0px;
margin-bottom:0px;
}
#header {
width: 100%;
}
.styled div {
margin-bottom:10px;
font-size: 40px;
font-weight: normal;
text-align: center;
width:80px;
border-radius:80px;
height:80px;
}
#Content h2 {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
font-size: 29px;
font-weight: 300;
}
非常感谢您的帮助!! Laëtitia
最佳答案
浏览器正在应用粗体字重,这是导致问题的原因,因为没有粗体流沙。您所要做的就是为出现两次的文本元素设置 font-weight:normal;
。
这里详细讨论了您的问题:
http://www.fontsquirrel.com/forum/discussion/277/webfonts-showing-up-twice/p1
关于html - 字体在 Ipad2 和 iphone4 上显示两次 - 在其他桌面浏览器上工作正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26179685/