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

-2

我有一个建立在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只是针对移动设备的正确方法？

N.B.我最初以为使用Media Queries，但新手机和平板电脑的宽度与PC显示器一样高或甚至更高，因此使用媒体查询不起作用。

此外，我愿意提供需要JavaScript的解决方案，但宁愿采用CSS方法来实现此字体响应。

来源

2016-12-06 Andrew Lyndem

你为什么要这么做？这里的细节很重要。如果您使用正确的维度，媒体查询就可以正常工作，但不知道您为什么要这么做，谁知道这是否会解决您的问题。它几乎听起来像是你出于兼容性原因提供了不同的字体，在这种情况下，你应该只有字体回退。 – Brad

那么，拥有该网站的客户明显需要。我试图说服他在PC和手机上为整个网站添加一个全球通用字体，从UI/UX的角度来看这是一个好主意，并且易于实现，因为我可以只使用'！important'标签'html'元素，但是。 –

媒体查询不需要仅仅基于屏幕宽度（例如“@media handheld {...}”，但是布拉德有一个非常好的点 – DavidG

不幸的是，有了一个伟大的Android设备碎片，媒体查询唯一的解决方案是接近不可能的。几个技巧你可以尝试在这里，但最终，JS是你最安全的选择。

你可以尝试在Css Tricks建设出更详细地描述复杂的媒体查询系统，但想补充的代码的复杂性。如果你使用的SCSS可以为你的源代码需要写得更干净一些，但最终的输出结果是一样的。
Modernizer!有功能来检测触摸事件，这将让你的CSS更干净，但带触摸屏的笔记本电脑都在使用越来越多的一天，并可能在这些设备上创造未来的一些错误。
和最安全的赌注有点JS的，增加了，例如mobile类，你的身体标记，以便您可以用更少的代码控制它你的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; 
 
}

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

希望它他lps

来源

2016-12-06 23:09:49

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

回答

相关问题