网络字体
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"></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;
