CSS非布局样式字体、行高

最新推荐文章于 2023-04-03 23:12:23 发布

.01

最新推荐文章于 2023-04-03 23:12:23 发布

阅读量231

点赞数

分类专栏： CSS&HTML

本文链接：https://blog.csdn.net/qq_43340342/article/details/104381326

版权

CSS&HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

非布局样式-字体

字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线
其它

字体族

一堆字体

serif	衬线字体
sans-serif	非衬线字体
monospace	等宽字体
cursive	手写体
fantasy	花体

多字体fallback

按照字体排列顺序逐个适配，直到有适配的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fonts</title>
    <style>
        body{
            /* font-family: "monaco"; */
            font-family: "monaco", "PingFang SC"; 
            /*font-family: "aaaaa", "monaco", "PingFang SC";*/
        }
        .chinese{
           /* font-family: "PingFang SC", "Microsoft Yahei", monospace;*/
             font-family: "Microsoft Yahei", serif; 
            /* font-family: "serif"; */
        }
        .weight{
            font-weight: bold;
            font-weight: bolder;
            font-weight: lighter;
            font-weight: normal;
            font-weight: 100;
        }
        @font-face {
            font-family: "IF";
            src: url("./IndieFlower.ttf");
        }
        .custom-font{
            font-family: IF;
        }
    </style>
</head>
<body class="body" id="body">
    Hello world 你好，世界
    <div class="chinese">你好</div>
    <!-- <div class="weight">你好 Hello World</div> -->
    <div class="custom-font">你好 Hello World</div>
</body>
</html>

远程字体用不了很可能就是跨域问题

网络字体、自定义字体

iconfont

阿里巴巴的图标库

非布局样式-行高

行高的构成

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>inline</title>
    <style>
        span{
            background:red;
        }
        .c1{
            line-height: 20px;
        }
        .c2{
            line-height: 8px;
        }
        .c3{
            line-height: 30px;
        }
        .c5{
            line-height: 28px;
        }
    </style>
</head>
<body>
    <div>
        <span class="c1">inline box xfg中文</span>
        <span class="c2">inline box</span>
        <span class="c3">inline box</span>
        inline box
        <span class="c5">inline box</span>
    </div>
</body>
</html>

行高不同，渲染高度却一样。这涉及文字的排版，底线和顶线就是文本占据的高度，默认情况下，字母x底部的线是基线baseline，行高会撑起来inline box的高度，本身布局的高度是渲染的高度，一行里不同行高的inline box，由行高最高的inline box决定这一行的行高。

行高相关的现象和方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>line-height</title>
    <style>
        .cc1{
            font-size:12px;
        }
        .cc2{
            font-size:18px;
        }
        .cc3{
            font-size:24px;
        }
    </style>
</head>
<body>
    <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 class="c1">
        <span class="cc1">第一段</span>
        <span class="cc2">第二段</span>
        <span class="cc3">第三段</span>
    </div>
    <div style="background:red">
        <span>文字</span>
        <img src="test.png"/>
    </div>
    <div>
        <div style="float:left">
            <span>第一段</span>
        </div>
        <div style="float:left">
            <span>第二段</span>
        </div>
    </div>
</body>
</html>

vertical-align: middle; 居中对齐

图片下面有细线怎么处理？
这是因为用的inline排版，默认的baseline与底线有距离，baseline视字体大小而定

vertical-align: bottom;

就可以消除细线

或者把display改成block

行高的调整

.01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS非布局样式字体、行高

非布局样式字体、字重、颜色、大小、行高背景、边框滚动、换行粗体、斜体、下划线其它字体族一堆字体serif衬线字体sans-serif非衬线字体monospace等宽字体cursive手写体fantasy花体多字体fallback按照字体排列顺序逐个适配，直到有适配的。<!DOCTYPE html><html...
复制链接

扫一扫