<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3初识(十)字体与行高</title>
<style>
/*@font-face可以将服务器上的字体提供给用户使用*/
@font-face {
/*指定你给字起的名字*/
font-family: 'rebirth';
/*服务器字体的路径*/
/*src: url("");*/
}
p{
color: royalblue;
font-size: 20px;
font-family: '华文行楷','微软雅黑',sans-serif;
}
.box1{
border: #e12914 1px solid;
/*行高会在字体框的上下平均分配*/
line-height: 13.3;
}
.box2{
border: #333333 1px solid;
/*字体的简写属性(bold加粗，italic斜体)*/
/*这里的/2指代的是line-height属性，不写默认1.33*/
font: bold italic 25px/2 'Times New Roman';
/*文字在div中垂直居中(上下居中)，也是常用的垂直居中方法*/
/*可以将行高设置为和高度样的值，使单行文字在个元素中垂直居中*/
line-height: 80px;
height: 80px;
/*注意：当font与line-height同时出现时，line-height要放在font后面，
不然会被font自带的line-height默认值所覆盖*/
}
/*
字体相关的样式：
color：设置字体颜色
font-size：设置字体大小
相关单位：
em：相当于当前元素的一个font-size
rem：相当于根元素的一个font-size
font-family：设置字体风格
可选值：
serif：衬线字体
sans-serif：非衬线字体
monospace：等宽字体
font-family可以同时指定多个字体，多个字体间使用'，'隔开，第一个无法使用就用后面的
font-weight：字体加粗属性
bold：加粗
normal：默认值，不加粗
100-900(属性值)：一般不用
font-style：字体风格属性
normal：正常
italic：斜体
字体图标：iconfont(阿里巴巴的矢量图标库，百度一下查看教程)
行高(line-height)
- 行高指的是文字占有的实际速度
- 可以通过CSS属性：line-height来设置行高
- 行高可以直接指定一个大小(px、em)，也可以直接设置成一个整数
如果是一个整数，行高将会是字体大小的指定的倍数
一般默认行高是1.33
字体框
- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
可以理解为每一个字都被一个框框住，font-size改变的只是字体框的大小
并不是字体就那么大，比如在这里，hello中的e这个字母要小于字体框
注意：行高会在字体框的上下平均分配
字体的简写属性：font
font可以设置字体相关的所有属性，属性之间用空格隔开
line-height可以省略不写，因为没有写line-height时，会自动使用默认值1.33
*/
</style>
</head>
<body>
<p>道可道，非常道；名可名，非常名。</p>
<div class="box1">行高查看(在这里div没有设置大小，是被内容所撑开的，通过给div加边框，里面的空间大小就相当于行高)</div>
<div class="box2">垂直居中</div>
</body>
</html>
浙公网安备 33010602011771号