您的位置：首页 > Web前端 > CSS

HTML/CSS学习汇总（4）

2016-11-16 17:38 393 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 字体

相关文章推荐

新的分享

章节导航