CSS字体

最新推荐文章于 2024-08-14 10:42:14 发布

一只爱好编程的程序猿

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量264

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_37881565/article/details/108273642

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS字体

CSS字体属性定义字体，加粗，大小，文字样式。

CSS字型

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

通用字体系列-拥有相似外观的字体系统组合（如“Serif”或“ Monospace”）
特定字体系列-一个特定的字体系列（如“Times”或“ Courier”）

Generic family	字体系列	说明
Serif	Time New Roman Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	“Sans”是指无-这些字体在末端没有额外装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

Generic family

字体系列

说明

Serif

Time New Roman Georgia

Serif字体中字符在行的末端拥有额外的装饰

Sans-serif

Arial

Verdana

“Sans”是指无-这些字体在末端没有额外装饰

Monospace

Courier New

Lucida Console

所有的等宽字符具有相同的宽度

字体系列

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

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

注意：如果字体系列的名称超过一个字，它必须用引号，如Font Family:“宋体”。

实例如下图所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	p.serif{font-family:"Times New Roman",Times,serif;}
	p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
	<h1>CSS font-family</h1>
	<p class="serif">这一段的字体是 Times New Roman </p>
	<p class="sansserif">这一段的字体是 Arial.</p>

</body>
</html>

效果图如下所示:

字体样式

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

这个属性有三个值：

正常-正常显示文本
斜体-以斜体显示的文字
倾斜的文字-文字向一边倾斜

实例如下图所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	p.normal {font-style:normal;}
	p.italic {font-style:italic;}
	p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>

</html>

效果图如下所示:

设置字体大小像素

设置文字的大小和像素，让您完全控制文字大小:

实例如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	h1 {font-size:40px;}
	h2 {font-size:30px;}
	p {font-size:14px;}
</style>
</head>
<body>

	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<p>This is a paragraph.</p>
	<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>

</body>
</html>

效果图如下所示:

用em来设置字体的大小

1em和当前字体大小相等。在浏览器中默认字体的大小是16px。

因此，1em的默认值大小是16px。可以通过下面公式像素转换为em:px/16=em

实例如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
    h1 {font-size:2.5em;} /* 40px/16=2.5em */
    h2 {font-size:1.875em;} /* 30px/16=1.875em */
    p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>使用 em 单位，允许在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
</p>
</body>
</html>

效果图如下所示:

使用百分比和em组合

在所有浏览器中的解决方案，设置<body>元素的默认字体大小是百分比:

实例如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	body {font-size:100%;}
	h1 {font-size:2.5em;}
	h2 {font-size:1.875em;}
	p {font-size:0.875em;}
</style>
</head>
<body>

	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<p>This is a paragraph.</p>
	<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>

</body>
</html>

效果图如下所示:

名称	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font- variant	以小型大写字体或正常字体显示
font-weight	指定字体的粗细