CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS font-size字体大小

CSS 中的 font-size 属性用于指定字体的高度和大小。它影响元素文本的大小。它的默认值是 medium 并且可以应用于每个元素。此属性的值包括xx-small、small、x-small等。

句法 (Syntax)

font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;

字体大小可以是相对的或绝对的。

绝对尺寸

它用于将文本设置为确定的大小。使用绝对大小，不可能在所有浏览器中更改文本的大小。当我们知道输出的物理尺寸时是有利的。

相对大小

它用于设置文本相对于其相邻元素的大小。使用相对大小，可以更改浏览器中文本的大小。

注意：如果我们不定义font-size，那么对于普通文本比如段落，默认的大小是16px，也就是1em。

带像素的字体大小

当我们用像素设置文本的大小时，它为我们提供了对文本大小的完全控制。

例子 (Example)

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  
#first {  
  font-size: 40px;  
}  
#second {  
  font-size: 20px;  
}  
</style>  
</head>  
<body>  
  
<p id="first">This is a paragraph having size 40px.</p>  
<p id="second">This is another paragraph having size 20px.</p>  
  
</body>  
</html>
自己试试 »

带有 em 的字体大小

它用于调整文本大小。大多数开发人员更喜欢em而不是像素。它由万维网联盟 (W3C) 推荐。如上所述，浏览器中的默认文本大小是 16px。所以，我们可以说1em的默认大小是16px。

计算从像素到em的大小的公式是em = pixel/16。

例子 (Example)

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#first {  
  font-size: 2.5em; /* 40px/16=2.5em */  
}  
  
#second {  
  font-size: 1.875em; /* 30px/116=1.875em */  
 }  
  
#third {  
  font-size: 0.875em; /* 14px/16=0.875em */  
}  
</style>  
</head>  
<body>  
  
<p id='first'>First paragraph.</p>  
<p id='second'>Second paragraph</p>  
<p id='third'>Third Paragraph.</p>  
</body>  
</html>
自己试试 »

响应字体大小

我们可以使用代表“视口宽度”的vw 单位来设置文本的大小。视口是浏览器窗口的大小。

1vw = 视口宽度的 1%。

如果视口的宽度为 50 厘米，则 1vw 等于 0.5 厘米。

例子 (Example)

<!DOCTYPE html>  
<html>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<body>  
  
  
<p style="font-size:5vw;">First paragraph having the width of 5vw.</p>  
<p style="font-size:10vw;">Second paragraph having the width of 10vw.</p>  
  
</body>  
</html>
自己试试 »

具有长度属性的字体大小

它用于设置字体的长度大小。长度可以是 cm、px、pt 等。 font-size 中不允许使用length属性的负值。

句法 (Syntax)

font-size: length;

例子 (Example)

<!DOCTYPE html>   
<html>   
    <head>   
        <style>   
            .length {   
                color:red;   
                font-size: 5cm;   
            }   
        </style>   
    </head>   
        
    <body>   
        <h1>font-size property</h1>   
            
        <p class = "length">A paragraph having length 5cm.</p>   
    </body>   
</html>
自己试试 »


上一主题 CSS Font字体 下一主题 CSS font-family字体系列
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具