CSS的字体样式属性_六六互联

CSS的字体样式属性

CSS的字体样式属性用于定义文本的字体系列、大小、风格等，CSS 常用的字体样式属性如表3-9所示。

表3-9 字体样式属性

属性	允许取值	描述
font-size:字号大小	1em、5em等	em表示相对于当前对象内文本的字体尺寸
font-size:字号大小	5px	px表示像素，最为常用，推荐使用
font-family:字体	“微软雅黑”	网页中常用的字体有宋体、微软雅黑、黑体等
font-weight:字体粗细	normal	默认值，定义标准的字符
	border	定义粗体字符
	bolder	定义更粗体字符
	ligthter	定义更细字体
	100~900	定义由细到粗的字符，其中400等同于normal
font-style:字体风格	normal	默认值，浏览器会显示标准的字体样式
	italic	浏览器会显示斜体的字体样式
	oblique	浏览器会显示倾斜的字体样式
word-wrap:长单词或URL自动换行	normal	只在允许的断点处换行（默认）
word-wrap:长单词或URL自动换行	break-word	在长单词或URL地址内部自动换行

1.字体属性合写

除以上常用的属性外，CSS还支持字体的合成功能，font属性用于对字体样式进行综合设置，其基本语法格式如下。

选择器{font:font-style || font-weight || font-size || line-height || font-family}

2.CSS3的@font-face规则

@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机中未安装的字体。

@font-face规则的语法格式如下：

@font-face{

font-family:<YourWebFontName>;

src:<source>[<format>][,<source>[<format>]]*;

[font-weight:<weight>]

[font-style:<style>];}

@font-face规则的取值说明如下。

(1)YourWebFontName：自定义的字体名称，最好是使用下载的默认字体，它将被引用到Web元素中的font-family,如“font-family:”myFont””.

source:此值指的是自定义的字体存放路径，可以是相对路径也可以是绝对路径。

(2)format:此值指的是自定义的字体格式，主要用来帮助浏览器识别自定义的字体格式，其值主要有truetype、opentype、truetype-aat、 embedded-opentype 、svg等几种类型。

(3)weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。

@font-face规则的具体用法如例3-4所示。运行页面效果如图3-6所示。

例3-4 example04.html

<!DOCTYPE html>

<html>

<head>

<title>@font-face用法</title>

</head>

<style>

@font-face {

font-family:myFont;

src: url('font/书法.ttf');

}

div{

font-family: myFont;

font-size: 4em;

}

</style>

<body>

<div>使用@font-size,应用漂亮的Web字体</div>

</body>

</html>

CSS的字体样式属性

图3-6 特殊字体的页面效果

3.web字体图标----font-awesome的应用

在传统的网页制作过程中，涉及图标的情况大多用图片进行处理，图片有些不足。例如，使用图片会增加总文件的大小和很多额外的“http请求”，增大服务器的负担，并且大量图片下载需要时，增加用户的等待时间，牺牲用户体验。因此，有时候在“响应式设计”中需要使用图标的最佳解决方案就是不去使用图片，而字体通常是矢量的，所以就解决了图片的缺点，即图标字体化。

自定义图标字体是比较麻烦，而font-awesome为用户准备了将近500个常用icon图标。

首先，我们去https://github.com/FortAwesome/Font-Awesome地址进行下载，下载解压后，打开文件夹，把所有字体文件和css文件“font-awesome.min.css”拷贝到项目中，接下来介绍如何使用font-awesome提供的图标，代码如例3-5所示。运行效果如图3-7所示。

例3-5 example05.html

<!DOCTYPE html>

<html>

<head>

<title>字体图标应用</title>

</head>

<body>

</body>

</html>

CSS的字体样式属性

图3-7 font-awesome使用效果图

4.多列布局

在网页制作中，如果想让一个段落的内容像报刊、杂志中那样分栏显示，就需要用到CSS3中提出的多列布局模块。如表3-10 多列布局的属性。

表3-10 多列布局的属性

属性	描述
column-count	规定元素应该被分隔的列数。
column-fill	规定如何填充列。
column-gap	规定列之间的间隔。
column-rule	设置所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间规则的样式。
column-rule-width	规定列之间规则的宽度。
column-span	规定元素应该横跨的列数。
column-width	规定列的宽度。
columns	规定设置 column-width 和 column-count 的简写属性。
column-fill	规定如何填充列。
column-gap	规定列之间的间隔。
column-rule	设置所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。

多列布局的具体用法如例3-6所示。

例3-6 example06.html

<!DOCTYPE html>

<html>

<head>

<style>

width: 1500px;

-webkit-column-count: 3;

-webkit-column-width: 200px;

-webkit-column-gap: 5em;

-webkit-column-rule: 5px solid silver;

font-size: 27px; margin: 0 auto;

}

</style>

</head>

<body>

<p>长沙职业技术学院是长沙市人民政府主办的的一所全日制普通高等职业院校，其前身是有谭嗣同夫人李闰等人于1902年创办的湖南省浏阳师范学校。百年名校，人才辈出，胡耀邦、杨勇等同志都曾在我校就读。学院现有雷锋（主）校区、浏阳（东）校区，占地面积600余亩，在校学生9000余人，教职工600余人，其中正、副教授110人，具有博士、硕士研究生学历的教师360余人。

学院设置有特殊教育与学前教育分院、机械与汽车工程分院、经济贸易与信息技术分院、建筑与艺术设计分院及思想政治课教学部、基础课教学部、体育与艺术教学部、中职教学部等4院4部，开设有汽</p>

</body>

</html>

运行例3-6，页面效果如图3-8所示。

CSS的字体样式属性