• HTML 学习笔记 CSS样式(字体)


    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了))

    css字体系列

    在css中 有两种不同类型的字体系列名称

    1.通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
    2.特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")

    指定字体系列

    font-family 属性定义字体系列

    body {font-family: sans-serif;}

    字体风格

    属性 font-style规定了字体的属性

    该属性有三个值

    normal 文本正常显示

    italic 文本斜体显示

    oblique 文本倾斜显示

    italic 和 oblique 的区别
    font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
    斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
    通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

    字体变形

    font-variant属性可以设定小写字母大写

    字体加粗

    font-weight设置文本的粗细

    关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
    如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

    字体大小

    font-size属性可以控制字体的大小

    css字体实例:

    <head>
            <meta charset="UTF-8">
            <title>字体</title>
            <style type="text/css">
                p.font {
                    /*设置字体样式*/
                    font-family: "bodoni mt condensed";
                    /*设置字体粗细程度*/
                    font-weight: 400;
                    /*设置字体大小*/
                    font-size: 30px;
                    /*设置字体显示风格*/
                    font-style: italic;
                }
                p.variant {
                    font-variant: small-caps;
                }
            </style>
        </head>
        <body>
            <p>这一段是正常的显示</p>
            <p class="font">这是一段文本 哈哈哈哈哈哈</p>
            <p class="variant">tianlianfeng</p>
        </body>
  • 相关阅读:
    C#实现Winform自定义半透明遮罩层
    C# winform 窗体弹出选择目录或文件 的对话框
    C# winform 窗体弹出选择目录或文件 的对话框
    python语言实现贪吃蛇
    python语言实现贪吃蛇
    用python写一个简单的表白代码
    用python写一个简单的表白代码
    用python写一个简单的表白代码
    百练2810:完美立方
    百练2810:完美立方
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6184098.html
Copyright © 2020-2023  润新知