非布局样式-字体
字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线
其它
字体族
一堆字体
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                     
</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