购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS Fonts(字体)

CSS Fonts(字体)
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)
编辑:前端控 前端控 更新时间:2019-02-01 13:35:33

CSS Fonts(字体) 

CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)

CSS字体系列:

在 CSS 中,有两种不同类型的字体系列名称:

通用字体系列:拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")

特定字体系列 : 具体的字体系列(比如 "Times" 或 "Courier")

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

字体示例
Serif 字体

This is a heading

This is a paragraph

Sans-serif 字体

This is a heading

This is a paragraph

Monospace 字体

This is a heading

This is a paragraph

Cursive 字体

This is a heading

This is a paragraph

Fantasy 字体

This is a heading

This is a paragraph

设置字体系列

font-family 属性用于设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体",多个字体系列是用一个逗号分隔指明

实例

h1{pfont-family:"Times New Roman", Times, serif;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

对于较常用的字体组合,看看我们的 Web安全字体组合

设置字体样式

主要是用于指定斜体文字的字体样式属性

这个属性有三个值:

normal:正常显示文本

italic:以斜体字显示的文字

oblique:文字向一边倾斜(和斜体非常类似,但浏览器不太支持)

实例

<style type="text/css">
	h1{
		font-style: normal;
	}
	h2{
		font-style:italic;
	}
	h3{
		font-style:oblique;
	}
	</style>
</head>
<body>
	<h1>This is a heading</h1>
	<h2>This is a heading</h2>
	<h3>This is a heading</h3>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

设置字体大小:

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对值。

绝对值:将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性),绝对大小在确定了输出的物理尺寸时很有用

例:像素(px)

相对大小:相对于周围的元素来设置大小允许用户在浏览器改变文本大小

例:em

1em 等于当前的字体尺寸,如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

实例

<style type="text/css">
	.p1{
		font-size:16px;
	}
	.p2{
		font-style:1em;
	}
	</style>
</head>
<body>
	<p class="p1">This is a heading</p>
	<p class="p2">This is a heading</p>
	
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 3.jpg

设置字体加粗:

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。

如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

实例

<style type="text/css">
	.p1{
		font-weight:bold;
	}
	.p2{
		font-weight:700;
	}
	</style>
</head>
<body>
	<p class="p1">This is a heading</p>
	<p class="p2">This is a heading</p>
	
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 4.jpg

所有CSS字体属性

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号