021_CSS字体

最新推荐文章于 2021-02-01 01:06:57 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-02-01 01:06:57 发布

阅读量196

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109071608

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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

2. CSS字体属性

3. CSS字体系列

3.1. 使用font-family属性定义字体系列。

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

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

3.1.2. 特定字体系列: 具体的字体系列(比如: "Times New Roman" 或 "Courier New")。

3.3. 通用字体族

3.3.1. 在CSS中, 有五个通用字体族:

衬线字体(Serif), 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体(Sans-serif), 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
等宽字体(Monospace), 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体(Cursive), 模仿了人类的笔迹。
幻想字体(Fantasy), 是装饰性/俏皮的字体。

3.3.2. 所有不同的字体名称都属于这五个通用字体系列之一。

3.3.3. Serif和Sans-serif字体之间的区别:

3.3.4. 在计算机屏幕上, 无衬线字体被认为比衬线字体更易于阅读。

3.3.5. 一些字体的例子

3.4. font-family可以把多个字体名称作为一个"后备"系统来保存。如果浏览器不支持第一个字体, 则会尝试下一个。也就是说, font-family属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

3.5. font-family可以把多个字体名称时, 使用逗号分割每个值，强烈推荐使用一个通用字体系列名作为后路。

3.6. 使用引号

3.6.1. 当字体名中有一个或多个空格(比如 New York), 或者如果字体名包括#或$之类的符号, 需要在font-family声明中加引号。

3.6.2. 单引号或双引号都可以接受。但是, 如果把一个font-family属性放在html的style属性中, 则需要使用该属性本身未使用的那种引号:

<p style="font-family: 'Times New Roman', Georgia, serif;">...</p>

3.7. 默认值

3.8. 可能的值

3.9. 例子

3.9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>指定字体系列</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1 {
				font-family: 'Times New Roman', serif;
			}
			p {
				font-family: Arial, Verdana, Helvetica, Sans-serif;
			}
		</style>
	</head>
	<body>
		<h1>This is heading 1</h1>
		<p>This is a paragraph.</p>
		<p>This is a paragraph.</p>
		<p>...</p>
	</body>
</html>

3.9.2. 效果图

4. 字体风格

4.1. font-style 属性最常用于规定斜体文本。

4.2. 斜体(italic)是一种简单的字体风格, 对每个字母的结构有一些小改动, 来反映变化的外观。与此不同, 倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

4.3. 通常情况下, italic和oblique文本在web浏览器中看上去完全一样, 但是倾斜支持较少。

4.4. 默认值

4.5. 可能的值

4.6. 例子

4.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字体风格</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p.normal {
				font-style:normal;
			}
			p.italic {
				font-style:italic;
			}
			p.oblique {
				font-style:oblique;
			}
		</style>
	</head>
	<body>
		<p class="normal">This is a paragraph, normal.</p>
		<p class="italic">This is a paragraph, italic.</p>
		<p class="oblique">This is a paragraph, oblique.</p>
	</body>
</html>

4.6.2. 效果图

5. 字体变形

5.1. font-variant属性设置小型大写字母的字体显示文本, 这意味着所有的小写字母均会被转换为大写, 但是所有使用小型大写字体的字母与其余文本相比, 其字体尺寸更小。

5.2. 默认值

5.3. 可能的值

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字体变形</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p.normal {
				font-variant: normal;
			}
			p.small {
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		<p class="normal">This is a paragraph</p>
		<p class="small">This is a paragraph</p>
	</body>
</html>

5.4.2. 效果图

6. 字体加粗

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

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

6.3. 默认值

6.4. 可能的值

6.5. 例子

6.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字体加粗</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p.normal {
				font-weight: normal;
			}
			p.bold {
				font-weight: bold;
			}
			p.bolder {
				font-weight: bolder;
			}
			p.lighter {
				font-weight: lighter;
			}
			p.fw100 {
				font-weight: 100;
			}
			p.fw200 {
				font-weight: 200;
			}
			p.fw300 {
				font-weight: 300;
			}
			p.fw400 {
				font-weight: 400;
			}
			p.fw500 {
				font-weight: 500;
			}
			p.fw600 {
				font-weight: 600;
			}
			p.fw700 {
				font-weight: 700;
			}
			p.fw800 {
				font-weight: 800;
			}
			p.fw900 {
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<p class="normal">默认值。定义标准的字符。</p>
		<p class="bold">定义粗体字符。<p class="bolder">定义更粗的字符。</p><p class="lighter">定义更细的字符。</p></p>
		<p class="fw100">定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 100</p>
		<p class="fw200">200</p>
		<p class="fw300">300</p>
		<p class="fw400">400</p>
		<p class="fw500">500</p>
		<p class="fw600">600</p>
		<p class="fw700">700</p>
		<p class="fw800">800</p>
		<p class="fw900">900</p>
	</body>
</html>

6.5.2. 效果图

7. 字体大小

7.1. font-size属性可设置字体的尺寸。

7.2. 该属性设置元素的字体大小。注意, 实际上它设置的是字体中字符框的高度; 实际的字符字形可能比这些框高或矮(通常会矮)。

7.3. 如果您没有规定字体大小, 普通文本(比如段落)的默认大小是16像素(16px=1em)。

7.4. 默认值

7.5. 可能的值

7.6. 例子

7.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字体大小</title>
		<meta charset="utf-8" />

		<style type="text/css">
			#xx-small {
				font-size: xx-small;
			}
			#x-small {
				font-size: x-small;
			}
			#small {
				font-size: small;
			}
			#medium {
				font-size: medium; 
			}
			#large {
				font-size: large; 
			}
			#x-large {
				font-size: x-large; 
			}
			#xx-large {
				font-size: xx-large; 
			}
			#smaller {
				font-size: smaller; 
			}
			#larger {
				font-size: larger; 
			}
			.span01 {
				font-size: 60px;
			}
			.span02 {
				font-size: 40px;
			}
			.span03 {
				font-size: 16px;
			}
			.span04 {
				font-size: 3.75em;
			}
			.span05 {
				font-size: 2.5em;
			}
			.span06 {
				font-size: 1em;
			}
		</style>
	</head>
	<body>
		<p id="xx-small">xx-small</p>
		<p id="x-small">x-small</p>
		<p id="small">small</p>
		<p id="medium">medium</p>
		<p id="large">large</p>
		<p id="x-large">x-large</p>
		<p id="xx-large">xx-large</p>
		<p id="smaller">smaller</p>
		<p id="larger">larger</p>
		<span class="span01">60px</span>
		<span class="span02">40px</span>
		<span class="span03">16px</span>
		<span>browser default px</span><br />
		<span class="span04">3.75em</span>
		<span class="span05">2.5em</span>
		<span class="span06">1em</span>
	</body>
</html>

7.6.2. 效果图

8. 字体

8.1. font简写属性在一个声明中设置所有字体属性。

8.2. 此属性也有第六个值: "line-height", 可设置行间距。

8.3. 可以按顺序设置如下属性:

font-style
font-variant
font-weight
font-size/line-height
font-family

8.4. 例子

8.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字体</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				font: italic small-caps bold 2em/50px Arial; 
				background-color: red;
			}
		</style>
	</head>
	<body>
		<p>This is a paragraph.</p>
	</body>
</html>

8.4.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
021_CSS字体

1.CSS字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。2. CSS字体系列2.1. 在CSS中, 有两种不同类型的字体系列名称:2.1.1. 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")。2.1.2. 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")。2.2. 除了各种特定的字体系列外, CSS定义了5种通用字体系列:2.2.1. Serif 字体2.2.2.
复制链接

扫一扫

专栏目录