跳至主要內容

字体样式


字体样式

字体样式具有属性:字体类型、字体大小、字体粗细、字体风格、字体颜色。

font-family(字体类型)

如果不定义font-family,浏览器将会采用默认字体样式类型,也就是“宋体”。

字体样式Demo
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1 {font-family:Arial;}
        #div2 {font-family: "Times New Roman";}
        #div3 {font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>

font-size(字体大小)

字体大小Demo
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1 {font-size: 10px;}
            #p2 {font-size: 15px;}
            #p3 {font-size: 20px;}
        </style>
    </head>
    <body>
        <p id="p1">字体大小为10px</p>
        <p id="p2">字体大小为15px</p>
        <p id="p3">字体大小为20px</p>
    </body>
</html>

font-weight(字体粗细)

字体粗细Demo
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-weight: 100;}
        #p2 {font-weight: 400;}
        #p3 {font-weight: 700;}
        #p4 {font-weight: 900;}
    </style>
</head>
    <body>
        <p id="p1">字体粗细为:100(lighter)</p>
        <p id="p2">字体粗细为:400(normal)</p>
        <p id="p3">字体粗细为:700(bold)</p>
        <p id="p4">字体粗细为:900(bolder)</p>
    </body>
</html>

font-style(字体风格)

字体风格Demo
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1{font-style:normal;}
            #p2{font-style:italic;}
            #p3{font-style:oblique;}
        </style>
    </head>
    <body>
        <p id="p1">字体样式为normal</p>
        <p id="p2">字体样式为italic </p>
        <p id="p3">字体样式为oblique</p>
    </body>
</html>

color(字体颜色)

字体颜色Demo
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1{color:gray;}
            #p2{color:orange;}
            #p3{color:red;}
        </style>
    </head>
    <body>
        <p id="p1">字体颜色为灰色</p>
        <p id="p2">字体颜色为橙色</p>
        <p id="p3">字体颜色为红色</p>
    </body>
</html>
上次编辑于:
贡献者: Neil