HTML&CSS(07)---CSS(6)字体与文本

 
  • 0 views

Unit Two: HTML&CSS(07)—CSS(6)字体与文本

1. 字体 Font

  • <color>用来设置字体颜色。

  • <font-size> 字体大小。

    • :em相当于当前元素的一个font-size。
    • :rem相当于根元素的一个font-size.

  • <font-famliy:>

    指定字体类型，浏览器会自动使用该类别下的字体。

    • serif 衬线体（不好好写字）
    • sans-serif 非衬线体
    • monospace等宽字体
      • 每个字母宽度一样。
    • @font-face{font-family:""; src:url();}
      • 可以将服务器中字体提供给用户使用。
      • 问题
        1. 加载速度
        2. 版权
        3. 字体格式ttf

    可指定多个字体，多个字体间使用，隔开。字体生效时，优先使用第一个，第一个无法使用，使用第二个，以此类推。

2. 图标 Icon

  • fontawesome使用步骤:

    1. 下载fontawesome

    2. 解压

    3. 将css和webfonts移动到项目中。

    4. 将all.css引入到网页中。

      <link rel="stylesheet" href="./fa/css/all.css">

    5. 使用图标字体

      • 直接通过类名来使用图标字体。class="fas/fab (+具体类名)"
      <i class="fas fa-dragon"></i>

      • 通过伪元素来设置图标字体

        1. 找到要设置图标的元素通过before或after选中。
        2. 在content中设置字体的编码
        3. 设置字体样式。
            li::before{
        content: '\f6f0';
        /* font-family: 'Font Awesome 5 Brands';
        font-weight: 400; */        
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 20px;
        color: aqua;
    }

      • 通过类+实体 &#x图标编码；

        <li class="fas">&#xf714;</li>

  • iconfont

    • 在网站后选定要是用的图标，然后下载项目。

    • 引入css链接。

    • 用法

      1. 直接使用类标签。

        <li class="iconfont icon-icon_wechat"></li>

      2. 使用伪类元素。

            li::before{
        content: '\e60c';
        font-family: 'iconfont';
        font-size: 50px;      
    }

      3. 使用类加实体标签。

        <i class="iconfont">&#xeb93;</i>

3. 行高 Line-height

  • 行高指的是文字占的实际高度。

  • <lineheight>

    • 可以指定一个大小。
    • 也可以设定一个整数。
      • 如果是整数的话，行高会是字体大小（<font-size>）的指定倍数。

  • 字体框

    • 字体框就是字体存在的格子，设置<font-size>实际上就是在设置字体框的高度。

  • 字体框(<font-size>)会在行高(<line-height>)的上下居中。

  • 单行文字垂直居中效果

    height=line-height

        div{
        height: 500px;
        line-height: 500px;
    }
    • 多行情况
      • line-height会将多行隔开。

  • 设置行间距

    • 行间距=行高-字体大小

4. 字体简写属性

<font>可以设置字体相关的所有属性。

  • 语法：

    font=（字体效果:bold italic）字体大小/行高 字体族

  • 字体其他效果

    • <font-weight：normal/bold/100-900>字重 字体加粗
    • <font-style: normal/italic> 斜体
        font: italic bold 50px Arial, sans-serif;

5. 文本 Text

  • 对齐

    • 文本水平对齐<text-align: left;right;center;justify>

    • 文本垂直对齐<vertical-align:>

      • 可选值：
        • :baseline基线对齐
        • :top使元素及其后代元素的顶部与整行的顶部对齐。
        • :bottom使元素及其后代元素的底部与整行的底部对齐。
        • :middle使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
        • 数值以基线为起点，上下移动。

    • 图片可以通过设置垂直对齐，去除上下空白间距。

          img{
        vertical-align: top;
    }

  • 文本修饰<text-decoration: none; underline; linethrough; overline>

    • 可选值
      • :none什么都没有
      • :underline下划线
      • :linethrough删除线
      • ：overline上划线

  • 空白<white-space>

    设置网页如何处理空白。

    • 可选值

      • normal正常
      • nowrap 不换行
      • pre 保留文本空白

    • 设置多余内容用省略号：

          div{
        width: 500px;
        /*文本不换行*/
        white-space:nowrap;
        /*文本裁剪*/
        overflow: hidden;
        /*文本溢出处理方式：ellipsis省略*/
        text-overflow:ellipsis;
    }

6. 练习–京东导航条

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Unit 2 CSS/205 定位/reset style/normalize.css">
    <link rel="stylesheet" href="/Unit 2 CSS/205 定位/reset style/reset.css">
    <link rel="stylesheet"
        href="/Unit 2 CSS/206 字体/fontawesome-free-5.14.0-web/fontawesome-free-5.14.0-web/css/all.css">
    <style>
        body {
            font: 12px/1 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            background-color: aquamarine;
        }

        .top-bar-background {
            background-color: rgb(227, 228, 229);
            height: 30px;
            width: 100%;
            line-height: 30px;
            border: 1px solid #dddddd;
        }

        .top-bar {
            width: 990px;
            margin: 0 auto;
        }

        .top-bar-site {
            float: left;
        }

        .current-city .fas {
            color: #f10215;
            margin-right: 4px;
            font-size: 14px;
        }

        .top-bar-right {
            float: right;
        }

        .city-list {
            width: 480px;
            height: 436px;
            background-color: rgb(255, 255, 255);
            display: none;
            border: 1px solid rgb(204, 204, 204);
            box-shadow: 0px 2px 2px rgb(204, 204, 204);
            position: absolute;
            z-index: 99;
            /*设置元素绝对位置，将上边距置于current-city之下，即可遮挡住边框。*/
            top: 32px;
        }

        .top-bar-site:hover .city-list {
            display: block;
        }

        .current-city {
            padding: 0px 10px;
            border: 1px transparent solid;
            border-bottom: none;
            position: relative;
            z-index: 9999;

        }

        .top-bar-site:hover .current-city {
            border: 1px solid rgb(204, 204, 204);
            background-color: rgb(255, 255, 255);
            border-bottom: none;
            padding-bottom: 1px;

        }

        .top-bar-right li {
            float: left;
        }

        .top-bar-right .line {
            width: 1px;
            height: 10px;
            background-color: rgba(161, 159, 159, 0.562);
            margin: 10px 12px;
        }

        a,
        i {
            color: #666;
            text-decoration: none;
        }

        a:hover {
            color: #f10215;
        }

        .register,
        .company {
            color: #f10215;
        }
    </style>
</head>

<body>
    <div class="top-bar-background">
        <div class="top-bar">
            <div class="top-bar-site">
                <div class="current-city">
                    <i class="fas fa-map-marker-alt"></i>
                    <a href="javascript:;" class="city">北京</a>
                </div>
                <div class="city-list"></div>
            </div>
            <ul class="top-bar-right">
                <li class="account">
                    <a href="javascript:;" target="_blank" rel="noopener noreferrer">你好，请登录</a>
                    <a class="register" href="javascript:;" target="_blank" rel="noopener noreferrer">请注册</a>
                </li>
                <li class="line"></li>
                <li class="my-order"><a href="javascript:;" target="_blank" rel="noopener noreferrer">我的订单</a></li>
                <li class="line"></li>
                <li class="mymember"><a href="javascript:;" target="_blank" rel="noopener noreferrer">我的会员</a>
                    <i class="fas fa-arrow-down"></i>
                </li>
                <li class="line"></li>
                <li class="member"><a href="javascript:;" target="_blank" rel="noopener noreferrer">京东会员</a></li>
                <li class="line"></li>
                <li class="company"><a href="javascript:;" target="_blank" rel="noopener noreferrer">企业采购</a>
                    <i class="fas fa-arrow-down"></i>
                </li>
                <li class="line"></li>
                <li class="service"><a href="javascript:;" target="_blank" rel="noopener noreferrer">客户服务</a>
                    <i class="fas fa-arrow-down"></i>
                </li>
                <li class="line"></li>
                <li class="site-map"><a href="javascript:;" target="_blank" rel="noopener noreferrer">网站导航</a>
                    <i class="fas fa-arrow-down"></i>
                </li>
                <li class="line"></li>
                <li class="moblie"><a href="javascript:;" target="_blank" rel="noopener noreferrer">手机京东</a></li>
            </ul>
        </div>
    </div>
</body>

</html>