CSS补充

2020-11-24 本文已影响0人 xiaohan_zhang

网络字体

font-face可以让网页支持网络字体（web font），不再局限于系统自带的字体
常见的字体种类：
TrueType字体：拓展名是.ttf
OpenType字体：拓展名是.ttf .otf，建立在TrueType字体之上
Embedded OpenType字体：拓展名是.eot，OpenType字体的压缩版
SVG字体：拓展名是.svg .svgz
web开放字体：拓展名是.woff，建立在TrueType字体之上
注意：并不是所有浏览器都支持以上字体，使用时要多测试。
字体下载：https://fonts.google.com

<style>
    @font-face {
        /* 字体名称 */
        font-family: "Nerko One";
        /* 字体路径 */
        src: url("./font/NerkoOne-Regular.ttf");
        /* 一种字体的多个格式 */
        /* src: url("./font/NerkoOne-Regular.ttf"), url("./font/iconfont.woff"); */
    }
    /* 设置字体 */
    p {
        font-family: "Nerko One";
    }
</style>

字体图标

1.阿里巴巴图标库选择图标
2.将图标添加到项目中
3.下载压缩文件
4.将解压后的文件拖到工程中
5.引入下载的iconfont.css
6.给要添加该图标的元素增加class="iconfont"
7.给要添加字体图标的元素设置font-family和颜色大小等

<style>
<link rel="stylesheet" href="./font/iconfont.css">
    span.iconfont {
        font-family: "iconfont";
        color: red;
        font-size: 32px;
    }
</style>
<body>
    <span class="iconfont">&#xe608;</span>
</body>

关键帧动画

关键帧动画使用@keyframes 来定义多个变化状态，并且使用animation-name来声明匹配：
1.使用@keyframes创建一个规则
2.@keyframes中使用百分比定义各个阶段的样式
3.听过animation将动画添加到属性上

<style>
        .box {
            width: 150px;
            height: 150px;
            background-color: hotpink;

            /* transition: transform 1s ease; */
        }
        .box:hover {
            /* 只有开始和结束两帧 */
            /* transform: translate(0, 250px); */

            animation: test1 2s linear;
            /* animation: test1 2s linear infinite; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }

        @keyframes test1 {
            from {
                /* 多个动画，用空格分隔 */
                transform: translate(0, 0) scale(1, 1);
            }
            25% {
                transform: translate(250px, 0);
            }
            50% {
                transform: translate(250px, 250px);
            }
            75% {
                transform: translate(0, 250px);
            }
            to {
                transform: translate(0, 0) scale(2,2);
            }
        }
</style>

超出文字显示省略号

white-space用于设置空白处理和换行规则
normal：合并所有连续的空白，允许单词超出时自动换行
nowrap：合并所有连续的空白，不允许单词超出时自动换行
text-overflow通常用来设置文字溢出时的行为（处理那部分不可见的内容）
clip：溢出的内容直接裁减掉（字符可能会显示不完整）
ellipse：溢出那行的结尾处省略号表示
text-overflow生效的前提是overflow不为visible

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

显示两行文本

span {
    width: 100px;
    /* 设置两行文本的高度 */
    height: 45px;
    background-color: darkolivegreen;
    margin: 0 auto;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    text-overflow: ellipsis;
    overflow: hidden;
}

视口大小

视口大小的设置，移动端必须加
width：视口宽度
initial-scale：缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">

不同单位的对比

设置文字大小的单位：
1.px:像素
2.em:相对于父元素字体的大小（2em:父元素字体*2）
3.%：不同场景相对的不一样（在字体中，相对于父元素的字体）
4.rem: 相对于html的字体大小
设置宽度的大小：
1.px:像素
2.em:自己有设置font-size，em相对于自己的font-size
自己没有设置font-size，em相对于父元素的font-size
3.%：相对于父元素的宽度
4.rem:相对于html的字体大小

rem

rem: root em 相对于HTML的字体大小

rem移动端
根据屏幕大小缩放：使用 js 动态计算;
动态计算rem值：利用postcss-pxtorem;