Question

我有一个基于Twitter Bootstrap的移动响应网站，它对不同的元素有不同的font-family，例如。

.body {
    font-family: Comic Sans;
}
.header {
    font-family: Arial;
}
.main {
    font-family: Helvetica;
}
.footer {
    font-family: sans-serif;
}
#someOtherElement {
    font-family: Times New Roman;
}

使用常见字体系列覆盖网站上每个元素的字体的正确方法是什么，Open Sans，但只适用于移动设备？

NB 我最初想过使用Media Queries，但新手机和平板电脑的宽度与PC显示器一样高甚至更高，因此使用媒体查询无效。< / p>

此外，我对需要JavaScript的解决方案持开放态度，但希望使用CSS方法来实现此字体响应。

Answer 1

不幸的是，对于一个很棒的Android设备碎片，媒体查询只有解决方案是不可能的。你可以尝试一些技巧，但最终，JS是你最安全的选择。

您可以尝试在Css Tricks处构建更详细描述的复杂媒体查询系统，但这会增加代码的复杂性。如果您使用的SCSS可以为您的源代码需求写得更清洁，但最后，输出将是相同的。
Modernizer!具有检测触摸事件的功能，可以保持您的css更清洁，但是带有触摸屏的笔记本电脑日常使用越来越多，这可能会在未来的某些设备上造成一些错误
最安全的做法是将一些JS添加到你的body标签中，例如mobile类，这样你就可以用更少的代码行控制你的css：

＆＃13;

// Check for userAgent 
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // set the body class
  document.getElementsByTagName('body')[0].className+='mobile'
}

＆＃13;

.body {
    font-family: Comic Sans;
}
.header {
    font-family: Arial;
}
.main {
    font-family: Helvetica;
}
.footer {
    font-family: sans-serif;
}

#someOtherElement {
    font-family: Times New Roman;
}

.mobile .body,
.mobile .header,
.mobile .main, 
.mobile .footer, 
.mobile #someOtherElement {
  font-family: 'Open Sans', sans-serif;
}

＆＃13;

您可以在detectmobilebrowsers.com

希望有所帮助

如何为移动用户使用不同的字体系列？

1 个答案: