CSS中非布局样式（一）

最新推荐文章于 2022-07-15 08:56:52 发布

背太阳的牧羊人

最新推荐文章于 2022-07-15 08:56:52 发布

阅读量251

点赞数

分类专栏： CSS HTML 文章标签：字体，字重，颜色，大小，行高 iconfont 字体fallback

本文链接：https://blog.csdn.net/u013565133/article/details/103314621

版权

CSS 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

CSS布局是一块非常重要的内容，这里单独介绍非布局样式。非布局样式有下面几种分类（还有其它分类看系列文章）：

字体，字重，颜色，大小，行高

这些是跟文字相关的样式。

字体族

族，顾名思义，就是一堆的东西，字体族就是一堆的字体，具体可以分为五个字体族：

serif 是衬线字体，字体周围会有一些装饰性的小勾角，英文解释就是：a short line at the top or bottom of some styles of printed letters 衬线，截线（部分印刷体的西文字母顶端或底部的短线）。比如宋体就是衬线字体。
sans-serif 是非衬线字体，这种字体的笔划的起和收都是比较规整的。比如黑体
monospace 是等宽字体，就是每一个字母占的空间都是一样的，我们一般在写代码的时候用的就是等宽字体。
cursive 是手写体，在网页中用的较少。
fantasy 是花体，在英文中很常见。
这五个字体族并不代表某个具体的字体，而是当指定一个字体族的时候会从中找

多字体fallback

就是当一个指定的字体找不到时会接着往后找。
比如：在Microsoft系统里

body{
            font-family: "monaco";      
  }

虽然body设置的font-family是 monaco，但我系统里没有这种字体，浏览器就会fallback用别的字体来渲染。
在这里插入图片描述
在实际项目中，每个系统会有不同的字体。
Mac系统自带的字体是"monaco" "PingFang SC"，微软雅黑在Mac系统中也会有用户安装，尤其是安装了office的用户基本上都会有微软雅黑字体，那就意味着，在写字体的顺序中如果 "Microsoft Yahei"写在最前面 Mac系统就会首先用"Microsoft Yahei"字体，但是在Mac系统中"Microsoft Yahei"字体的显示效果是没有"PingFang SC"好的。所以把只有一个平台会有的字体写在最前面，再把其它的写在后面，像下面：

.body {
            font-family: "PingFang SC", "Microsoft Yahei", monospace;
   }

注意：字体名称加引号，字体族不能加引号。

自定义字体

既然是自定义字体无非就是规定 a字体长什么样，b字体长什么样，如果我规定 a字体长的是一个手机的图标，b字体长的是一个电脑的图标，那就可以把文字当成图标用了，这就是所谓的 iconfont。比如：

html代码：

<div class="custom-font">你好 Hello World</div>

css代码：

@font-face {
            font-family: "IF";
            src: url("./IndieFlower.ttf");
        }
        .custom-font{
            font-family: IF;
        }

效果如下：
在这里插入图片描述
网上有很多图标库，比如阿里巴巴矢量图标库，里面有很多丰富的字体图标。

行高的构成

行高是由 line-box 决定的，line-box 是由inline-box组成的，inline-box 的高度会决定行高的高度：

html代码：

<body>
    <div>
        <span class="c1">inline box 中文</span>
        <span class="c2">inline box</span>
        <span class="c3">inline box</span>
        inline box
        <span class="c5">inline box</span>
    </div>
</body>

css代码：

    <style>
        span {
            background: pink;
        }

        .c1 {
            line-height: 20px;
        }

        .c2 {
            line-height: 8px;
        }

        .c3 {
            line-height: 30px;
        }

        .c5 {
            line-height: 28px;
        }
    </style>

这里有五个span元素，它们的行高都不同，虽然它们的行高不同但它们渲染的高度是相同的，这涉及到文字的排版，文字排版中有几条线，底线和顶线之间是文本占据的区域，默认情况下文字的排版对齐都是按照基线（baseline）对齐的，所以这些文本虽然行高不同但都是对齐的，行高会决定文字上下之间多余的宽度，进而把外面的盒子撑起来，所以line-height会撑起来inline-box的高度。
在这里插入图片描述

行高相关的现象和方案

1，div元素中字体能垂直居中的原理：

<div style="border:solid 1px red;">
        <span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
            居中xfg&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        </span>
    </div>

效果：
在这里插入图片描述
这里的div没有定高，div中的span元素也是没有定高的（当然，span元素默认是内联元素，给它定高也没用）；span元素中的line-height:60px;在这里比字体的高度（font-size:20px;）要高，所以会把div元素撑起来，导致span元素在div元素中上下都有等高空白留出，这样span内联元素就在div中垂直居中，所以平时写字体垂直居中时一般设置line-height就可以了，而且此时可以不用设置div的高度。
2，字体大小不一样默认情况下按基线（baseline）对齐：

    <div class="c1">
        <span class="cc1">第一段</span>
        <span class="cc2">第二段</span>
        <span class="cc3">第三段</span>
    </div>

   <style>
        .cc1 {
            font-size: 12px;
        }

        .cc2 {
            font-size: 18px;
        }

        .cc3 {
            font-size: 24px;
        }
    </style>

效果：
在这里插入图片描述

中文字体的底部（注意：不是底线，是底部）就是基线的位置，所以会看到字体会底部对齐。此时div的高度是由第三个span元素撑起来的（但高度并不是字体大小）。
如果想要div元素中的文字都垂直居中，只需要分别将三个span元素设置vertical-align:middle即可。
3，文字旁边图片的空白：

<div style="background:red">
        <span>文字</span>
        <img src="test.png"/>
    </div>

在这里插入图片描述
有空白是因为img默认是一个内联元素，内联元素就要遵守行高的规则，它也会按照基线（baseline）对齐，基线对齐就意味着基线到底线之间是有一段空隙的，这是这个空隙产生的原因，空隙的大小由字体大小来定，如果字体是12px，那空隙将会是3px，这就是经典的图片3px空隙问题。既然图片也遵守垂直对齐的规则，那只需要调整成vertical-align:bottom;按底线对齐即可，这样缝隙就没有了。