如何在不改变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中的字体大小？

回答

相关问题