如何爲移動用戶使用不同的字體系列？

-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

如何爲移動用戶使用不同的字體系列？

回答

相關問題