如何在不改變div大小的情況下更改HTML/css中的字體大小？

當我更改div（id =「home」）中的文本大小時，它也會更改div的大小。我希望能夠在每次不更改div大小的情況下更改文本大小。如何在不改變div大小的情況下更改HTML/css中的字體大小？

下面是HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'> 
     <link type="html/css" rel="stylesheet" href="websiteCSS.css"/> 
     <title>PROTOTYPE</title> 
    </head> 
    <body> 
     <div id="sidebar"></div> 
     <div id="home" class="header">Home</div> 
    </body> 
</html>

和CSS：

body{ 
    margin: 0; 
    background: #d5e9d7; 
} 

#sidebar { 
    z-index: 1; 
    position: fixed; 
    width: 20%; 
    height: 100%; 
    margin-top: 0; 
    margin-left: 0; 
    #background-color: light blue; 
    background-image: linear-gradient(to bottom, #545454 0%, #424242 100%); 
    margin-bottom: 10px; 
} 

.header { 
    position: fixed; 
    width: 2.5em; 
    height: 1em; 
    padding: 8px; 
    background-color: #b2b2b2; 
    margin-top: 0.5%; 
    margin-left: 20.5%; 
    font-family: 'Josefin Sans', sans-serif; 
    font-size: 2em; 
    color: #333333; 
} 

.header:hover { 
    font-size: 2.1em; 
}

來源

2013-07-02 user2540862

我正面臨類似的問題。而且我無法預先確定我的div的高度。如果字體已經很大，我需要將它設置爲高度。我有懸停效果來增加字體大小。 – nikhilvj

您可以在px中設置div大小或設置min-width或min-height屬性。

來源

2013-07-02 01:19:04 sebu

設置div容器（寬度和高度），以便能夠容納最壞情況（最大）的字體大小。這將根據字體大小停止div的大小調整。

來源

2013-07-02 01:17:18 jonosma

如何在不改變div大小的情況下更改HTML/css中的字體大小？

回答

相關問題