HTML/CSS学习汇总（4）

来源：互联网发布：java list 排序倒序编辑：程序博客网时间：2024/05/22 23:58

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为居中。

0 0