关于css:CSS字体类型font

4次阅读

共计 2604 个字符，预计需要花费 7 分钟才能阅读完成。

今天上午温习了编译原理还有概率论就到中午了，吃完饭持续学习 CSS，看看几天能够学完根底。加油

属性	阐明
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>

显示成果：

阐明：
这一行 #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>

显示成果：

px 是 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>

显示成果：

个别咱们应用 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>

显示成果：

设置斜体是 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>

显示成果：

阐明：
这个 #03FCA1 是 16 进制 RGB 的办法，能够让色彩变动更加粗疏，其中#000000 是彩色，#FFFFFF 是红色。

正文完