如何为移动用户使用其他字体系列？

debugcn 发表于 Dev

安德鲁·L64

我在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但仅适用于移动设备？

注意：我最初考虑使用，Media Queries但是新手机和平板电脑的宽度与PC显示器一样高甚至更高，因此使用媒体查询将行不通。

另外，我欢迎需要JavaScript但希望使用CSS一种实现这种字体响应性的方法的解决方案。

马可·马诺伊洛维奇（Marko Manojlovic）

不幸的是，由于存在大量的android设备碎片，仅媒体查询解决方案几乎是不可能的。您可以在这里尝试一些技巧，但最终，JS是您最安全的选择。

您可以尝试构建复杂的媒体查询系统，这在Css Tricks上有更详细的描述，但这只会增加代码的复杂性。如果您使用的SCSS可以满足您的源代码需求，但最终结果将是相同的。
现代化者！具有检测触摸事件的功能，可以使CSS保持清洁，但是带触摸屏的笔记本电脑每天都在使用，并且将来可能会在这些设备上产生一些错误。
最安全的做法是添加一些JS，例如将mobileclass添加到body标签，以便您可以用更少的代码行来控制CSS：

// 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'
}

.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;
}

您可以在detectmobilebrowsers.com上找到更广泛的JS / jQuery正则表达式检查

希望能帮助到你

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。