一、 字号大小设置
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、 代码示例
代码示例 :文章来源：https://www.toymoban.com/news/detail-784196.html
<!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>
执行效果 :
文章来源地址https://www.toymoban.com/news/detail-784196.html
到了这里，关于【CSS】CSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
