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

我有一个基于Twitter Bootstrap的移动响应网站，它有一个不同的

字体系列

，用于不同的元素，例如

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

使用通用字体系列（例如，

opensans

但仅适用于移动设备）覆盖网站上每个元素的字体的正确方法是什么

---

N.B.我最初想到使用

媒体查询

，但新手机和平板电脑的宽度与PC显示器一样高，甚至更高，因此使用媒体查询是行不通的

---

此外，我对需要

JavaScript

的解决方案持开放态度，但我更喜欢

CSS

方法来实现这种字体响应。

不幸的是，随着android设备的大量碎片化，仅媒体查询的解决方案几乎不可能实现。在这里您可以尝试一些技巧，但最终，JS是您最安全的赌注

您可以尝试构建复杂的媒体查询系统，详细信息请参见，但这只会增加代码的复杂性。如果您使用的是SCS，那么它可以编写得更干净一些，以满足您的源代码需求，但最终，输出将是相同的

具有检测触摸事件的功能，这将使您的css更干净，但带有触摸屏的笔记本电脑每天都在使用，这可能会在这些设备上产生一些bug

最安全的方法是在body标签中添加一点JS，例如

mobile

class，这样你就可以用更少的代码行控制你的css：

//检查userAgent
if（/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent））{
//设置身体等级
document.getElementsByTagName（'body'）[0]。类名+='mobile'
}

.body{
字体系列：漫画版；
}
.标题{
字体系列：Arial；
}
梅因先生{
字体系列：Helvetica；
}
.页脚{
字体系列：无衬线；
}
#其他元素{
字体系列：时代新罗马；
}
.移动。身体，
.mobile.header，
.mobile.main，
.mobile.footer，
.mobile#其他元素{
字体系列：“开放式Sans”，无衬线；
}

为什么要这样做？这里的细节很重要。如果您使用了正确的维度，那么媒体查询就可以正常工作，但不知道为什么要这样做，谁知道这是否能解决您的问题。听起来你提供不同的字体是出于兼容性的原因，在这种情况下，你应该有字体回退。好吧，拥有网站的客户显然希望这样。我试着说服他在PC和手机上为整个站点添加一个通用字体，这从UI/UX的角度来看是个好主意，而且很容易实现，因为我可以使用

！重要的

标记在

html

元素上，但是是的。媒体查询不需要仅仅基于屏幕宽度（例如

@Media handled{…}

），但是Brad有一个很好的观点。“注意，我最初考虑使用媒体查询，但新手机和平板电脑的屏幕尺寸与PC显示器一样高，甚至更高，因此使用媒体查询是行不通的。“具有视网膜分辨率的移动设备不会向媒体查询报告实际屏幕分辨率-您可以在Chrome Dev Tools中使用设备工具栏查看。例如：iPhone 6 Plus的纵向宽度为414px，而不是1080px。@DavidG

@media handled

不再使用-它甚至可能早于智能手机。