CSSCSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )

Posted 2023-03-08 韩曙亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSCSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )相关的知识，希望对你有一定的参考价值。

文章目录

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

一、字号大小设置

1、语法简介

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

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 标签样式 ;

<!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 文字字体设置语法 :

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

常见的字体 :

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

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

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

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

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

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

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

2、 Unicode 编码字体名称

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

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

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

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

	p   
	    font-family:"Microsoft Yahei";

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

	p   
	    font-family:"\\5FAE\\8F6F\\96C5\\9ED1";

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

字体名称	英文名称	Unicode 编码
宋体	SimSun	\\5B8B\\4F53
新宋体	NSimSun	\\65B0\\5B8B\\4F53
黑体	SimHei	\\9ED1\\4F53
微软雅黑	Microsoft YaHei	\\5FAE\\8F6F\\96C5\\9ED1
楷体_GB2312	KaiTi_GB2312	\\6977\\4F53_GB2312
隶书	LiSu	\\96B6\\4E66
幼园	YouYuan	\\5E7C\\5706
华文细黑	STXihei	\\534E\\6587\\7EC6\\9ED1
细明体	MingLiU	\\7EC6\\660E\\4F53
新细明体	PMingLiU	\\65B0\\7EC6\\660E\\4F53

3、代码示例

代码示例 :

<!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>