更改字體系列後調整所有字體大小

Question

我有關於更改所有font-size s的問題。 我設計一個響應的網頁與下面的字體：

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 

和製造上的font-style屬性使得響應，做了這麼多的媒體查詢。

#menu li{ 
    font-size:12px; 
} 
@media only screen and (min-width: 768px) { 
#menu li{ 
    font-size:14px; 
} 
} 
@media only screen and (min-width: 1000px) { 
#menu li{ 
    font-size:16px; 
} 
} 
@media only screen and (min-width: 1300px) { 
#menu li{ 
    font-size:17px; 
} 
} 

我在我的網站有很多這些類，如果我改變字體家族，很難在所有媒體查詢中修改所有這些類。 我改變FONT-FAMILY：

font-family: 'Merriweather', serif; 

和字體來源：

<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'> 

因此，它的字體大部分光說的那個16px的不幸比Cambria字體16像素大。 我有一個jQuery的解決方案，可以通過0.9縮放字體：

$(document).ready(function(){ 
    $('*').each(function({ 
     $(this).css('fontSize',$(this).css('fontSize').split('px')[0]*0.9); 
    }) 
}) 

但問題是代碼擾亂響應在調整大小事件。那麼是否有人有一個純粹的CSS解決方案。非常感謝你的幫助。

Answer 1

一個通用的解決方案是定義一般的「基本」 FONT-SIZE的規則html和/或body，並在所有其他規則使用em，rem或百分比值：em將永遠是相對於其父元素，rem將始終是相對於根大小（即html）。

因此，在這些情況下，您可以簡單地設置html的媒體查詢中的不同規則，例如html { font-size: 15px; }（或16,14,12或任何px，基本上與上面所做的一樣）。如果所有其他字體大小都是em，rem或百分比，則所有字體大小將根據和與該規則相關而改變。

Answer 2

一個解決方案是使用相對字體大小，比如em，所以你不必用jQuery來改變所有的元素。一個更好，但支持不好的相對單位是rem。然後你就可以輕鬆調整字體大小，整個文檔：

#menu li { 
    font-size: 0.688em; 
} 

@media only screen and (min-width: 768px) { 
    #menu li { 
     font-size: 0.75em; 
    } 
} 
@media only screen and (min-width: 1000px) { 
    #menu li { 
     font-size: 0.875em; 
    } 
} 
@media only screen and (min-width: 1300px) { 
    #menu li { 
     font-size: 0.938em; 
    } 
} 

document.body.style.fontSize = "90%"; 

MDN article about length units

另一種方法是創建另一個樣式表，您可以更改字體家族時插入或取出更大的字體：

#menu li { 
    font-size:11px; 
} 

@media only screen and (min-width: 768px) { 
    #menu li { 
     font-size:12px; 
    } 
} 
@media only screen and (min-width: 1000px) { 
    #menu li { 
     font-size:14px; 
    } 
} 
@media only screen and (min-width: 1300px) { 
    #menu li { 
     font-size:15px; 
    } 
} 

因爲這是相當複雜的，你可能想使用SASS or LESS，那麼你可以讓字體大小可變的。

順便說一下，它是（在我看來）從來不是一個好主意，使用如此小的字體大小！