css怎么设置字体大小-css教程-PHP中文网

首页

web前端

css教程

css怎么设置字体大小

Jan 27, 2021 pm 06:17 PM

css 字体大小

在css中，可以通过font-size属性来设置字体大小，语法格式为“font-size:值;”。该属性的值可以是“small”、“large”、“smaller”、“larger”等关键字；也可是加px、em、rem、%单位的数值。

本文操作环境：宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版

（学习视频分享：css视频教程）

在CSS中，可以使用font-size属性来调整字体大小；font-size属性用于设置字体大小。如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。

注意，实际上font-size属性设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

可以设置的属性值：

示例1：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            /* font-size属性设置字体大小--“数字+长度值”
            */
            .length1 {
                font-size: 20px;
                /* 
                px，像素，它是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等, 
                它是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI
                 
                px 单位的值必须是整数值
                 */
            }
         
            .length2 {
                font-size: 2em;
                /* em
                相对长度单位，取决于目标元素字体尺寸。
                em 单位的值等于基本元素或父元素的字体大小。
                */
            }
             
            .length3 {
                font-size: 2rem;
                /* rem
                CSS3中加入的 相对长度单位，
                取决于文档根元素（通常为:root）的字体尺寸，适用于依据字体尺寸进行的排版，适用于自适应。 */
            }
            .length4{
                font-size:200%;
                /* 相对于父元素的尺寸的取值，
                实际使用中，如果父元素是一个非稳定的取值，可能会导致父元素被撑开，
                而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值，并不适用于解决自适应问题。 */
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;length1&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;length2&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;length3&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;length4&quot;&gt;这是测试段落&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

登录后复制

效果图：

示例2：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            /* font-size属性设置字体大小--相对大小值 */
            .larger {
                font-size: larger;
                /* 把 font-size 设置为比父元素更大的尺寸。 */
            }
 
            .smaller {
                font-size: smaller;
                /* 把 font-size 设置为比父元素更小的尺寸。 */
            }
 
        &lt;/style&gt;
    &lt;/head&gt;
 
    &lt;body&gt;
         
        &lt;p&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;larger&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;smaller&quot;&gt;这是测试段落&lt;/p&gt;
    &lt;/body&gt;
 
&lt;/html&gt;

登录后复制

效果图：

示例3：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;style type=&quot;text/css&quot;&gt;
 
           /*font-size属性设置字体大小--绝对大小值*/
            .xx-small {font-size: xx-small;}
            .x-small {font-size: x-small;}
            .small {font-size: small;}
            .medium {font-size: medium;}
            .large {font-size: large;}
            .x-large {font-size: x-large;}
            .xx-large {font-size: xx-large;} 
        &lt;/style&gt;
    &lt;/head&gt;
 
    &lt;body&gt;    
         
        &lt;p&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;medium&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;xx-small&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;x-small&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;small&quot;&gt;这是测试段落&lt;/p&gt;
         
        &lt;p class=&quot;large&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;x-large&quot;&gt;这是测试段落&lt;/p&gt;
        &lt;p class=&quot;xx-large&quot;&gt;这是测试段落&lt;/p&gt;
    &lt;/body&gt;
 
&lt;/html&gt;