CSS3-基本文本属性Text（下）

字体属性
1. 字体名称： Font-family
2. 字体大小：Font-size
3. 字体样式：Font-style
4. 指定字母是否以小型大写字母显示：Font-variant
5. 设置字体粗细：Font-weight 值为100-900，数值越大字体越粗
6. 创建文本阴影：Text-shadow
7. etc…

实例1：（设置字体）默认由浏览器设置

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>FontNameCSS_Test</title>
    <style type="text/css">
        .class1 {
            font-family: 微软雅黑;
            /* 由本机电脑安装字体提供； */
        }
    </style>
</head>

<body>
    <p>MelanceXin</p>
    <p class="class1">MelanceXin</p>
    <p style="font-family:宋体">MelanceXin</p>
    <p style="font-family:黑体">MelanceXin</p>
</body>

</html>

实例2：（设置字体大小）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin FontSizeCSS_Test</title>
    <style type="text/css">
        .class1 {
            font-size: 40px;
            /* 字体大小为40px */
        }
    </style>
</head>

<body>
    <p>MelanceXin</p>
    <p class="class1">MelanceXin</p>
</body>

</html>

实例3：（字体样式）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin FontStyleCSS_Test</title>
    <style type="text/css">
        .class1 {
            font-style: italic;
            /* 有四个属性值 ： normal 为正常设置 为默认设置 ，italic 为斜体，inherit ，oblique 也为斜体 */
            /* （oblique  斜体程度比 italic 更轻 ） */
        }
    </style>
</head>

<body>
        <p >MelanceXin</p>
		<p class="class1">MelanceXin</p>
		<p  style="font-style:oblique;">MelanceXin</p>
</body>

</html>

实例4：（指定字母是否以小型大写字母显示）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin FontVariantCSS_Test</title>
    <style type="text/css">
        .class1 {
            font-variant: samll-caps;
            /* 默认全小一号的 大写 caps   */
        }

        .class2 {
            text-transform: uppercase;
            /* 默认正常全大写 */
        }
    </style>
</head>

<body>
    <p>MelanceXin</p>
    <p class="class1">MelanceXin</p>
    <p class="class2">MelanceXin</p>
</body>

</html>

实例5：（设置字体粗细）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin FontWeightCSS_Test</title>
    <style type="text/css">
        .class1 {
            /* font-weight:100; */
            font-weight: bold;
            /* 属性值 bolder 字体更粗 */
        }
    </style>
</head>

<body>
    <p>MelanceXin</p>
    <p class="class1">MelanceXin</p>
</body>

</html>

实例6：（创建文本阴影）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>MelanceXin TextShadowCSS_Test</title>
    <style type="text/css">
        .class1 {
            text-shadow: 10px 15px 5px red;
            /* 水平10px偏移  垂直 15px偏移  模糊程度 5px （模糊程度可不填写）  颜色 红色（阴影效果显示的文字无法被选中，可以只显示阴影，把之前文本内容隐藏）  */
            /* // text-shadow:10px 15px #000000;  */
        }
    </style>
</head>

<body>
    <p>MelanceXin </p>
    <p class="class1">MelanceXin </p>
</body>

</html>

实现阴影效果图：
在这里插入图片描述

CSS3-基本文本属性Text（下）

猜你喜欢