阅读 270

CSS 字体样式

在写项目的过程中,常常会遇到给文字设置样式的场景,一般来讲,字体有类型、大小、粗细、风格、颜色等样式。

一、字体类型 font-family

1、设置一种字体

使用 font-family 设置字体时,若字体全称为一个单词,不需要加上双引号,若字体全称为多个单词,则需要加上双引号,表示这是一个整体,示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                font-family: "Times New Roman";
            }
            p{
                font-family: Arial;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <div>Like_Frost</div>
        <p>Like_Frost</p>
    </body>
</html>
复制代码

为 div 和 p 标签定义不同的字体,在浏览器中显示如下:

image.png

2、设置多种字体

当为元素定义多种字体类型时,浏览器会从定义的第一个字体开始检索,若当前浏览器支持第一种字体,则使用第一种字体,否则向后检索,直到检索到浏览器支持的字体,在未设置字体时,默认显示宋体,示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div,p{
                font-family: "Times New Roman",Arial;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <div>Like_Frost</div>
        <p>Like_Frost</p>
    </body>
</html>
复制代码

在浏览器中显示如下:

image.png

二、字体大小 font-size

在实际开发中,字体的取值有两种,一种是关键字,如 small、medium、large 等,另一种是像素值,如 px,em,rem,百分比等,在初始时,只学习 px 就可以,后期在做网页适配时再使用相对单位。

1、px 是什么

px,全称为 pixel(像素),一个像素指的是一张图片中最小的点,或者是计算机屏幕最小的点,严格来说,px 属于相对单位,因为屏幕分辨率不同,1px 的大小也是不同的,如果不考虑屏幕的分辨率,可以将 px 当成绝对单位来看待。

2、使用 px 为单位

有如下代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                font-size: 100px;
            }
            p{
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <div>Like_Frost</div>
        <p>Like_Frost</p>
    </body>
</html>
复制代码

在浏览器中显示如下:

image.png

三、字体粗细 font-weight

在 CSS 中,使用 font-weight 来定义字体的粗细,取值有两种,一种是关键字,另一种是 100-900 的数值,数值的大小代表文字的粗细。font-weight 的关键字取值如下:

属性值说明
normal正常(默认值),相当于 100
lighter较细,相当于 400
bold较粗,相当于 700
bolder很粗,相当于 900

有如下示例:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                font-weight: 100;
            }
            p{
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <p>Like_Frost</p>
    </body>
</html>
复制代码

在浏览器中显示为:

image.png

四、字体风格 font-style

在 CSS 中,我们常用 font-style 来定义斜体效果,属性值如下:

属性值说明
normal正常(默认值)
italic斜体
oblique斜体

示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                font-style: normal;
            }
            span{
                font-style: oblique;
            }
            p{
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <span>Like_Frost</span>
        <p>Like_Frost</p>
    </body>
</html>
复制代码

在浏览器中显示为:

image.png

可以发现,后两个斜体在浏览器中效果是一样的,但是并非所有字体都有 italic 属性,对于没有这个属性的字体,使用 oblique 来实现斜体效果。但在日常开发中很少用到 font-style 属性。

五、字体颜色 color

使用 color 来设置字体的颜色,其取值属性有两种,一种是关键字,一种是 16 进制 RGB 值,(还有 RGBA、HSL 等,在 CSS3 中提到)。

  • 关键字是指颜色的英文名称,如 red、blue 等;
  • RGB 值是指使用十六进制的数字来表示颜色的方式。

示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                color: aquamarine;
            }
            span{
                color: #3499b8;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <span>Like_Frost</span>
    </body>
</html>
复制代码

在浏览器中显示为:

image.png

六、CSS 注释

使用方式:/* */

文章分类
前端
文章标签