【发布时间】：2014-11-28 13:20:01
【问题描述】：
我使用 fontsquirrel 和 google 的字体，它们在桌面浏览器（IE、safari、chrome、firefox）上运行良好。 但是当涉及到移动 safari 时，特别是 ipad2 和 iphone4，字体出现了两次，意思是，它显示了 2 次相同的单词，就好像它是两次相同的文本！问题出在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;
}
非常感谢您的帮助！ 蕾蒂娅
【问题讨论】：
-
您在某处有实时页面吗？我在上面注意到的一件事是您在上次媒体查询中缺少右括号，但我怀疑这是您的问题。在上下文中查看它会有所帮助。
-
感谢布赖恩的评论！即使它不会像你说的那样解决问题，我也会关闭那个支架。您可以查看此处的页面，再次感谢！ projets.gobelins.fr/fc/mm65/mm650214/laetitia
-
这可能已经完成了...在 Chrome 和 Safari 中的 iPad2 上进行了测试，没有发现任何问题。还在 Safari 中测试了 iPhone 4，没有问题。
-
其实我没有做任何更改，右括号已经存在；我没有正确复制和粘贴整个 CSS 样式表。不明白为什么，但字体仍然无法在我的设备上正确显示...
-
非网络字体会发生这种情况吗？您提到了无衬线字体，但我不确定您是指网络字体还是默认系统字体。不管怎样，我第一次听说这种行为。顺便说一句，这似乎是 iPad 2 的问题，并且可能是过时的 Safari 和/或 iOS 版本，因为在 iPad Air 最新更新上它工作正常
标签： html css iphone ipad fonts