也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

[css] 文本的基本样式（颜色、倾斜、粗体、字体大小、行高、字体）

1. 字体基本样式

首先，让我们放置一些文本。 基本上所有的标签都可以设置字体样式。 这里我们使用标签和

过来示范一下。

    
O泡时间到！
    
给我O泡给我O泡，O泡果奶OOO！

图1 基本文本疗效

注意，所有文本属性都是可以继承的，即父元素设置后，子元素才会生效。 当父子元素都存在属性时，遵循就近原则。

1. 字体大小

字体大小使用font-size属性：

        font-size: 10px;  /*设置字号为10px*/

如图1所示，h1标签具有手动放大字体的功能，所以我们不希望字体显得那么大，所以我们可以在css中调整h1的字体大小。 我们设置一个20px来看看。

    
    
    
        h1{
            font-size: 20px;
        }
    

预览后发现h1的字体变小了。

图1-1 改变字体大小后的h1

其他标签字体大小的改变也是一样的。 在Chrome浏览器中，可以显示的最小字体大小为12px。 如果设置得更小，它仍然只显示 12px。 其他浏览器会有所不同。 在实际开发中，通常使用单一大小的字体大小。

2. 文字加粗

文本粗体属性使用 font-weight 属性：

font-weight: normal; /*设置文字不加粗*/
font-weight: bold; /*设置文字加粗*/

从图1可以看出，有些标签默认是粗体的，例如，有些标签默认不是粗体的，例如

，现在我们将 h1 更改为非粗体，将 p 更改为粗体。

    
        h1{
            font-size: 20px;
            font-weight: normal;
        }
        p{
            font-weight: bold;
        }
    

图2-1 更改粗体效果

3.文字倾斜

文本斜体属性使用 font-style 属性：

font-style: italic; /*倾斜*/
font-style: normal;  /*不倾斜*/

和

默认不倾斜，我们添加倾斜属性。

    
        h1{
            font-size: 20px;
            font-weight: normal;
            font-style: italic;
        }
        p{
            font-weight: bold;
            font-style: italic;
        }
    

图3-1 倾斜疗效

4. 字体

字体大小使用font-family属性：

font-family: '楷体'; 
 /*设置文字为楷体，这里单引号和双引号都是可以的，字体名称一个字都不能差哦！*/

为了方便看到字体，我删除了之前设置的一些属性，我们将其设置为斜体，

设置为谷歌雅黑：

    
        h1{
            font-family: '楷体';
            font-weight: normal;
        }
        p{
            font-family: "微软雅黑";
        }
    

图4-1 字体设置

注意：并非每个笔记本都具有所有字体。 如果你写的字体没有安装在笔记本上，则只能作为默认显示。 有几种字体可以安全地在几乎所有笔记本中显示：

粗体、斜体、粗体、微软雅黑

（苹果笔记本可能没有谷歌雅黑）

尽管有一些方法可以让网页在任何笔记本上显示字体，并且如果可能的话，尽可能使用安全字体。 如何防止笔记本没有我们选择的字体？ 我们可以设置多种字体html 字体阴影，用冒号分隔，如下：

    
        h1{
            font-family: '未知字体','楷体';
            font-weight: normal;
        }
        p{
            font-family: "微软雅黑",'楷体';
        }
    

如果笔记本中安装了我们编写的第一个字体，则使用该字体。 如果未安装，您可以选择下一个字体。 例如，前面的代码将选择斜体，并且

会选择上面的谷歌雅黑。

图 4-2 多种字体

5. 列宽

列宽使用 line-height 属性：

line-height: 30px;  /*设置行高为30px*/

比如我们打开Chrome浏览器，右键检测html 字体阴影，找到左侧的h1标签。 中间的白色和上下绿色部分是柱宽。 您可以看到它当前为 40px。

图 5 - 140px 列宽

我们将其更改为 80px：

        h1{
            line-height: 80px;
            font-family: '楷体';
            font-weight: normal;
        }

图 5 - 280px 列宽

6. 文字颜色

文本的颜色使用color属性（注意是颜色！没有字体！）：

这三种表示方式都表示蓝色，接下来详细写一下三种表示形式的含义和联系。

color:red
color: rgb(255, 0, 0);
color: #ff0000
/*设置文字为红色*/

我们简单地改变一下颜色：

    
        h1{
            color:red
        }
        p{
            color: rgb(255, 176, 176);
        }
    

图6-1 变色文字

2. 复合文本属性

使用font属性（注意顺序，空格分隔，粗体和斜体可以省略，省略后默认不是斜体或粗体，颜色也只能单独设置）：

font:italic bold 20px/3 '楷体'; /*倾斜 加粗 字号/行高 字体*/

尝试设置一下：

   
       h1{
           font:italic bold 20px/3 '楷体';
       }
       p{
           font:20px/3 '楷体';
       }
   

最后编辑于：2020.02.29 01:15:52

©专着版权归作者所有，转载或内容合作请联系作者