【CSS】CSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置

文章目录

一、字号大小设置
- 1、语法简介
- 2、代码示例
二、字体设置
- 1、语法简介
- 2、 Unicode 编码字体名称
- 3、代码示例

一、字号大小设置

1、语法简介

在 CSS 中 , 字号大小设置语法如下 :

代码语言：javascript复制

p {  
    font-size:16px;
}

上述代码的含义是 , 将 HTML 页面所有的 p 标签字号都设置成 16 像素 ;

font-size 属性值的单位推荐使用 px 像素 , 也可以使用下面的长度单位 :

px : 像素 , 强烈推荐使用 ;
em : 相对当前对象文本的大小 ;
in : 英寸 , 绝对长度单位 ;
cm : 厘米 , 绝对长度单位 ;
mm : 毫米 , 绝对长度单位 ;
pt : 点 , 绝对长度单位 ;

font-size 设置注意事项 :

推荐使用像素 px 作为单位 , 其它长度单位不常用 , 适配比较麻烦 ;
不同的浏览器的默认文字大小不同 , 尽量为每个 body 设置一个基本的默认字体大小 , 推荐在 body 中设置 16 px ;
Google 浏览器默认文字大小 16 像素 ;

2、代码示例

代码示例 : 在开始处 , 先设置 body 标签下所有的文字为 16 px , 然后在后面定义 tittle 类的文字大小为 20 px , 这样遇到 tittle 类标签后 , 在该类标签中可以覆盖之前的 body 标签样式 ;

代码语言：javascript复制

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>Google</title>
		<base target="_blank"/>
        <style>
			body {
				font-size:16px; 
			}
			.tittle {
				font-size:20px; 
			}
        </style>
    </head>
    <body>
		<p class="tittle">静夜思</p>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
    </body>
</html>

执行效果 :

二、字体设置

1、语法简介

CSS 文字字体设置语法 :

代码语言：javascript复制

p { 
	font-family:"微软雅黑";
}

常见的字体 :

微软雅黑 , 默认字体 ;
宋体
黑体

如果指定了多个字体 , 如下样式 , 优先使用前面的字体 ;

代码语言：javascript复制

.tittle {
	font-size:20px; 
	font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";
}

先查找黑体 , 如果黑体存在直接使用黑体 , 如果黑体不存在则继续查找 Arial 字体 , 直到找到合适的字体 ;

( 如果所有字体都没有 , 默认使用电脑的默认字体 )

font-family 字体属性值注意事项 :

如果设置多个字体属性值 , 使用逗号隔开 ;
中文名称的字体 , 使用双引号包裹 ;
英文名称的字体 , 直接写上去即可 , 不必使用双引号 ;
如果字体的英文名称中包含空格 , # , $ 等字符 , 则必须加双引号或单引号 ;
使用系统的默认字体 , 不要使用不常见的字体 , 保证浏览器适配 ;

2、 Unicode 编码字体名称

在 CSS 中设置中文名称字体时 , 涉及到不同的文件编码 , 如果编码不匹配会产生乱码 ;

代码语言：javascript复制

	p {  
	    font-family:"微软雅黑";
	}

出现乱码后解决方案有两种 :

使用英文名称 : 如果设置微软雅黑字体 , 则可以设置 " Microsoft Yahei " 字体 ;

代码语言：javascript复制

	p {  
	    font-family:"Microsoft Yahei";
	}

使用 Unicode 编码 : 注意 Unicode 编码要使用双引号括起来 ;

代码语言：javascript复制

	p {  
	    font-family:"5FAE8F6F96C59ED1";
	}

中文字体名称对应 Unicode 不编码 :

字体名称	英文名称	Unicode 编码
宋体	SimSun	5B8B4F53
新宋体	NSimSun	65B05B8B4F53
黑体	SimHei	9ED14F53
微软雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
楷体_GB2312	KaiTi_GB2312	69774F53_GB2312
隶书	LiSu	96B64E66
幼园	YouYuan	5E7C5706
华文细黑	STXihei	534E65877EC69ED1
细明体	MingLiU	7EC6660E4F53
新细明体	PMingLiU	65B07EC6660E4F53

3、代码示例

代码示例 :

代码语言：javascript复制

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>Google</title>
		<base target="_blank"/>
        <style>
			body {
				font-size:16px; 
				font-family:"宋体";
			}
			.tittle {
				font-size:20px; 
				font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";
			}
        </style>
    </head>
    <body>
		<p class="tittle">静夜思</p>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
    </body>
</html>

执行效果 :