HTML/CSS学习汇总（4）

CSS：字体

字体分为两类：
1.Serif - 在字的笔划开始及结束的地方有额外的装饰，且笔划的粗细会因直横的不同而有不同。
2.Sans Serif - 没有额外装饰，笔画粗细差不多。

在CSS中，
font-family属性用于设置字体：
h1 {
font-family: Garamond;
}
若值由多个单词组成，则要为它加上双引号：
h1 {
font-family: "Courier New";
}
有些用户的电脑可能没有安装设置的字体，因此在设置字体时，可以为它添加备用选项：
h1 {
font-family: Garamond, Times, serif;
}
在这个例子中，浏览器会优先选择Garamond体，若用户电脑中未安装该字体，则选择Times，若两者均为安装，则从任何已安装的serif字体中选择一种。

新的字体在不断更新，若期望所有用户的电脑都能及时更新所有字体，那就太不现实了，幸运的是，你不必去预测用户电脑安装了什么字体，因为许多新字体都会被合并在一个目录中，例如Google Fonts,包含数以千计的免费开源字体供任何人使用。只需要在HTML代码中增加一行用于连接Google Fonts的link：
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:100" type="text/css" rel="stylesheet" >
</head>
Raleway是Google Fonts中的一种字体，100指的是字体粗细（font-weight）

font-size属性用于设置字体大小：
p {
font-size: 18px;
}
px为像素单位，除此之外还有ems和%。
px : 1px大约是1寸的1/72。
ems : 1em就是单个文本元素的初始大小，因此它会跟随文本元素大小的改变而改变
% : 网页默认的文本元素为16px，因此100%就是16px,200%就是32px

line-height属性用于设置行高：
p {
line-height: 1.5em;
}
随着行高的改变，行间距（leading）也会跟着改变，行高和行间距的示意图如下：

word-spacing属性用于设置字间距：
h1 {
word-spacing: 0.3em;
}

letter-spacing属性用于设置字母间距：
h1 {
letter-spacing: 0.3em;
}

font-weight属性用于设置字体粗细：
p {
font-weight: bold;
}
bold为加粗，除此之外，还有一个normal值，表示正常粗细。

font-style属性用于设置斜体：
h3 {
font-style: italic;
}
同样地，font-style也有一个normal值。

text-transform属性用于设置大小写：
h1 {
text-transform: uppercase;
}
uppercase为大写，lowercase为小写。

text-align属性用于设置文本对齐方式：
h1 {
text-align: right;
}
right为靠右对齐，left为靠左对齐，center为居中。