likes
comments
collection
share

CSS字体类型font

作者站长头像
站长
· 阅读数 293

font

今天上午复习了编译原理还有概率论就到中午了,吃完饭继续学习CSS,看看几天可以学完基础。加油CSS字体类型font

属性说明
font-family字体类型
font-size字体大小
font-weight字体粗细
font-style字体风格
color字体颜色

1、font-family

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS font Style</title>
        <style type="text/css">
            #f1{font-family: Arial, Helvetica, sans-serif;}
            #f2{font-family: "Times New Roman";}
            #f3{font-family: "微软雅黑";}
        </style>
    </head>
    <body>
        <div id="f1">font 1</div>
        <div id="f2">font 2</div>
        <div id="f3">font 3</div>
    </body>
</html>

显示效果:CSS字体类型font说明:这一行#f1{font-family: Arial, Helvetica, sans-serif;}代码表示f1部分优先使用Arial字体,如果电脑中没有安装该字体,则使用后面的,以此类推,如果都没有安装的话,默认显示宋体。2、font-size

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS font Style</title>
        <style type="text/css">
            #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;}
            #f2{font-family: "Times New Roman"; font-size:xx-small;}
            #f3{font-family: "微软雅黑";font-size: 80%;}
            #f4{font-family: "楷体";font-size: 32px;}
        </style>
    </head>
    <body>
        <div id="f1">字体font 1</div>
        <div id="f2">字体font 2</div>
        <div id="f3">字体font 3</div>
        <div id="f4">字体font 4</div>
    </body>
</html>

显示效果:CSS字体类型fontpx是pixel(像素),默认大小是16px,em = 希望得到的像素大小 / 父元素字体像素大小(这里就相当于16*3px=48px)%是相对于原来字体大小的百分比3、font-weight

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS font Style</title>
        <style type="text/css">
            #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;font-weight:700;}
            #f2{font-family: "Times New Roman"; font-size:xx-small;font-weight: bold;}
            #f3{font-family: "微软雅黑";font-size: 100%;font-weight: 900;}
            #f4{font-family: "楷体";font-size: 32px; font-weight: 500;}
            /* h1{font-size: 250%;} */
        </style>
    </head>
    <body>
        <h1>最大的标题</h1>
        <div id="f1">字体font 1</div>
        <div id="f2">字体font 2</div>
        <div id="f3">字体font 3</div>
        <div id="f4">字体font 4</div>
    </body>
</html>

显示效果:CSS字体类型font一般我们使用bold就够了。4、font-style

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS font Style</title>
        <style type="text/css">
            #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;font-weight:700;}
            #f2{font-family: "Times New Roman"; font-size:xx-small;font-weight: bold;}
            #f3{font-family: "微软雅黑";font-size: 32px;font-weight: 900;font-style: oblique;}
            #f4{font-family: "楷体";font-size: 32px; font-weight: 500;font-style: italic;}
            /* h1{font-size: 250%;} */
        </style>
    </head>
    <body>
        <h1>最大的标题</h1>
        <div id="f1">字体font 1</div>
        <div id="f2">字体font 2</div>
        <div id="f3">字体font 3</div>
        <div id="f4">字体font 4</div>
    </body>
</html>

显示效果:CSS字体类型font设置斜体是italic,但是有些字体没有这个属性,这个时候就要用oblique来实现斜体。5、color

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS font Style</title>
        <style type="text/css">
            #f1{color: pink;}
            #f2{color:blueviolet}
            #f3{color: #03FCA1;}
        </style>
    </head>
    <body>
        <h1>最大的标题</h1>
        <div id="f1">字体font 1</div>
        <div id="f2">字体font 2</div>
        <div id="f3">字体font 3</div>
        <div id="f4">字体font 4</div>
    </body>
</html>

显示效果:CSS字体类型font说明:这个#03FCA1是16进制RGB的方法,可以让颜色变化更加细致,其中#000000是黑色,#FFFFFF是白色。