zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    显示内容和隐藏v-show(以及图标的动态展示)
    主表查询子表
    怎么在pda安装apk
    java学习第40天2020/8/14
    Java学习第39天2020/8/13
    java学习第38天2020/8/12
    java学习第37天2020/8/11
    rz
    git tag
    audio vedio 播放
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6184098.html
Copyright © 2011-2022 走看看